JS鼠标的拖拽原理

拖拽功能主要是用在让用户作一些自定义的动做，好比拖动排序，弹出框拖动移动等等，效果仍是蛮不错的。下面讲解一下拖拽的原理，但愿能够帮助到有须要的朋友！

1、拖拽的流程动做
①鼠标按下
②鼠标移动
③鼠标松开

2、拖拽流程中对应的JS事件
①鼠标按下会触发onmousedown事件

obj.onmousedown = function(e) {
      //..........
}

②鼠标移动会触发onmousemove事件

obj.onmousemove = function(e) {
    //......
}

③鼠标松开会触发onmouseup事件

obj.onmouseup = function() {
     //......
}

3、实现的原理讲解
拖拽实际上是经过获取鼠标移动的距离来实现的，即计算移动前的位置的坐标（x，y）与移动中的位置的坐标（x，y）差值。
当鼠标按下或鼠标移动时，均可以获取到当前鼠标的位置，即移动前的位置与移动中的位置。
那么上面①与②的代码就应该变成这样

var mouseDownX,mouseDownY  // 因在移动中需计算鼠标的偏移须要用到鼠标按下时的坐标，固声明称全局变量
obj.onmousedown = function(e) {
    mouseDownX = e.pageX;
    mouseDownY = e.pageY;
}

obj.onmousemove = function(e) {
    var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
}

移动前与移动后坐标有了，那么计算偏移，先看下图

 

很明显移动后元素的X坐标为  鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标
Y坐标为  鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标
把新的 X，Y 替换元素的 X，Y 就搞定了。
那么代码就应该更换为：

var mouseDownX,mouseDownY,initX,initY,flag = false;
obj.onmousedown = function(e) {
    //鼠标按下时的鼠标所在的X，Y坐标
    mouseDownX = e.pageX;
    mouseDownY = e.pageY;

    //初始位置的X，Y 坐标
    initX = obj.offsetLeft;
    initY = obj.offsetTop;

    //表示鼠标已按下
    flag = true;
}
obj.onmousemove = function(e) {
    // 确保鼠标已按下
    if(flag) {
        var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
        this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";
        this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";
    }

}
obj.onmouseup = function() {
    //标识已松开鼠标
    flag = false;
}

须要注意的事，若是用jquery库来写的话三个事件为mousedown、mousemove、mouseup，名称稍微有点差异。

 

还有一点，被拖拽的元素的样式要设置成绝对或相对位置才有效果。

至此，最简单的元素拖拽功能就讲完了~~~~

若有不正确之处欢迎你们指正！