JS拖拽元素原理及实现代码

一、拖拽的流程动作

①鼠标按下
②鼠标移动
③鼠标松开

二、拖拽流程中对应的JS事件

①鼠标按下会触发onmousedown事件

②鼠标移动会触发onmousemove事件

③鼠标松开会触发onmouseup事件

三、实现的原理讲解

拖拽其实是通过获取鼠标移动的距离来实现的，即计算移动前的位置的坐标（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 就搞定了。

一般是对象onmousedown,onmousemove 和onmouseup是document来出发事件采用因为如果拖动速度过快，拖动元素会不动，因此采用document.onmousemove事件代替拖动的元素拖动事件