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

拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等，效果还是蛮不错的。下面讲解一下拖拽的原理，希望可以帮助到有需要的朋友！

一、拖拽的流程动作

①鼠标按下

②鼠标移动

③鼠标松开

拖拽原理

1.鼠标按下+鼠标移动  =  拖拽      事件  onmousedown +  onmousemove  

2.鼠标松开  =  无拖拽                  停止拖拽  onmouseup

3.鼠标偏移  =   拖拽距离 

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

①鼠标按下会触发onmousedown事件

②鼠标移动会触发onmousemove事件

③鼠标松开会触发onmouseup事件

三、实现的原理讲解

拖拽其实是通过获取鼠标移动的距离来实现的，即计算移动前的位置的坐标（x，y）与移动中的位置的坐标（x，y）差值。

当鼠标按下或鼠标移动时，都可以获取到当前鼠标的位置，即移动前的位置与移动中的位置。

那么上面①与②的代码就应该变成这样

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

很明显移动后元素的X坐标为  鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标

Y坐标为  鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标

把新的 X，Y 替换元素的 X，Y 就搞定了。

那么代码就应该更换为：

需要注意的事，如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup，名称稍微有点差别。

注意：（1）被拖拽的元素的样式要设置成绝对或相对位置才有效果。

           （2）拖拽加到document，不然内容会脱离