拖拽原理以及代码实现

拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等；挺好玩儿

，和码友们一起学习！理解有误或者有更好的建议请提出来哦

下面分享一下拖拽的原理

拖拽流程：

1）事件：onmousedown；onmousemove；onmouseup；

2）实现原理分析：

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

当onmousedown或onmousemove时，都可以获取到当前鼠标的位置，即移动前的坐标值与移动中的坐标值。

参考如下图：

如上图所示：

在onmousemove中元素的left值为 ： 鼠标移动后的left值 - 鼠标按下的left值 + 元素的初始left值；

top值为 ： 鼠标移动后的top值 - 鼠标按下的top值 + 元素的初始top值；

需要注意：onmousemove；onmouseup事件要在onmousedown事件内；

代码如下：