HTML5元素拖拽原理实现

拖拽功能常见于一些模板生成网站，比如 H5 制作网站，我以前都没有注意这一方面，因为功能需要，特地去了解了一下元素拖拽 API。

两种效果：

常见的拖拽有两种效果，一种是拖拽到某个区域后放开自动补位，一种是拖动到任意位置。两种效果实现原理是不一样的。

第一种效果原理：

先看看用到的 drag 事件的API：

1. dataTransfer：The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.（机器翻译：作为拖放操作的基础的数据，称为拖放数据存储区.保护模式）【参考】。
2. target：被拖动元素下方的元素，常作为放置区域元素。

实现原理其实是将被拖拽的元素插入到放置区域元素的节点下，需要用到appendChild。

因为放置区域可能不止一个，所以用drag事件的target方法获取放置区域元素。

而同样的被拖拽的元素可能也不止一个，所以用drag事件的dataTransfer方法传递该元素的 id 或者指向唯一节点元素的值。

注意： 在放置到区域的时候（ondrop）和元素拖拽结束的时候（ondragover）要阻止放置区域元素的默认事件，方法是preventDefault()。

第二种效果原理：

涉及到的 drag 事件API：

1. screenX：鼠标相对于屏幕的 X 坐标
2. screenY：鼠标相对于屏幕的 Y 坐标
3. clientX：鼠标指针相对于 DOM 的 Y 坐标
4. clientY：鼠标指针相对于 DOM 的 Y 坐标

实现原理其实也很简单，即记录拖拽过程中的坐标差值，将元素的本身位置坐标加上这个差值。

实现只横向移动，例如滑块验证，只需记录 X 坐标，同理也可以实现竖向滑动。

本文作者：KylinLee

本文链接：https://kylin.dev/2019/12/26/HTML5元素拖拽原理实现

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。