javascript 原生实现拖拽

在javascript中，我们可以通过事件event对象来获取一些属性和方法。其中clinetX和clientY这两个属性可以拿到鼠标相对于窗口的坐标位置，并且是无单位的数。

在了解了需要的信息下，我们开始今天的主题——拖拽

需要了解事件： onmousedown、onmouseup、onmousemove

需要了解事件对象属性：clientX、clientY、offsetLeft、offsetTop

下面是实现代码

// html

css部分

div{

    width: 150px;

    height: 150px;

    background: red;

    position: absolute; // 必须定义

    top: 0;

    left: 0;

}

js部分                                             

// 首先找到我们要拖拽的元素

oDiv = document.getElementsByTagName('div')[0];

// 监听鼠标按下事件

oDiv.onmousedown = function(event){

    var event = event || window.event //兼容低版本IE

    // 鼠标按下的时候记录鼠标在盒子中的位置

    var deltaX = event.clientX - oDiv.offsetLeft; // 相对于X轴的偏移量

    var deltaY = event.clientY - oDiv.offsetTop; // 相对于Y轴的偏移量

    // 给整个document添加mousemove事件，鼠标移动时触发

    document.onmousemove = function(event2) {  // 为了区别开上下文event事件对象 定义为event2

        oDiv.style.left = event2.clientX - deltaX + 'px';

        oDiv.style.top = event2.clientY - deltaY + 'px';

    }    

}

// 监听鼠标抬起事件

document.onmouseup = function() {

    document.onmousedown = null; // 删除了监听

}

上面这段代码就是拖拽的实现逻辑，偏移量的计算是为了让div在鼠标移动过程中只运算div相对于窗口的移动距离，而不是鼠标。

有什么不足之处，请各位大大指点。