如何理解并实现JavaScript中的拖拽效果原理？

本文共计895个文字，预计阅读时间需要4分钟。

拖拽功能主要用于让用户进行一些自定义操作，如拖动排序、弹出框拖动移动等。拖拽流程包括：

1.鼠标按下：会触发onmousedown事件。

2.鼠标移动：会触发onmousemove事件。

3.鼠标放开：会触发onmouseup事件。

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

拖拽的流程动作

1、鼠标按下 会触发onmousedown事件

2、鼠标移动 会触发onmousemove事件

3、鼠标松开 会触发onmouseup事件

拖拽原理

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

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

3.鼠标偏移 = 拖拽距离

当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，而且还要在鼠标按下的回调函数里添加鼠标移动的事件：

document.addEventListener(“mousemove”, moving, false)

和添加鼠标抬起的事件

document.addEventListener(“mouseup”,function() { document.removeEventListener(“mousemove”, moving, false); }, false);

这个抬起的事件是为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。