> 最近在项目中使用了 [react-dnd](https://react-dnd.github.io/react-dnd/about "react-dnd - Github")，一个基于 HTML5 的拖拽库，“拖拽能力”丰富了前端的交互方式，基于拖拽能力，会扩展各种各样的拖拽反馈效果，因此有必要学习了解，最好的学习方式就是实操！拖拽交互常见于各种前端编辑器里，而“编辑器”是一个集成前端技术能力的综合性工程，其中就会涉及到各种形式的拖拽交互，因为“拖拽”是提升用户体验的重要交互方式，所以需要对拖拽的交互效果做各种定制化，作为开发者理应熟练掌握“拖拽”的应用！最近在开发一款低代码平台，所以借此机会分享一下关于“拖拽”这一交互的基础知识和实践经验，希望可以给有需要的同学提供一点参考。 # 一、HTML5 中的拖放拖（Drag）和放（Drop）是 HTML5 标准的组成部分，了解掌握之后，举一反三，有助于提升我们在拖拽场景下技术方案的设计能力。 ## 1.1 draggable 属性现代浏览器中，不难发现，图片标签（``）是可以被长按拖拽，但如果需要自定义的 DOM 节点可以被拖拽需要配置以告诉浏览器提供对元素（`Element` / `Tag`）支持拖拽的能力。而元素是否允许被拖放且可响应 API 操作依赖于 [draggable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable "draggable - MDN") 全局标签属性 **draggable** 是一个布尔值类型的标签属性： - `true`：元素可被拖拽 - `false`：元素不可拖拽当元素设置了 draggable 属性，此时长按就可以自由拖拽了： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6809b3642c454837b5eda33d9feefe85~tplv-k3u1fbpfcp-zoom-1.image "可拖拽效果") ## 1.2 Drag & Drop 事件 HTML 的 `drag` & `drop` 使用了“**DOM Event**”和从“**Mouse Event**”继承而来的“**drag event**” 。 **一个典型的拖拽操作：** 用户选中一个可拖拽的（`draggable`）元素，并将其拖拽（鼠标按住不放）至一个可放置的（`droppable`）元素上，然后松开鼠标。在拖动元素期间，一些与拖放相关的事件会被触发，像 `drag` 和 `dragover` 类型的事件会被频繁触发。除了定义拖拽事件类型，每个事件类型还赋予了对应的事件处理器 |事件类型|事件处理器|触发时机|绑定元素| |:--|:--|:--|:--| |`dragstart`|ondragstart| 当开始拖动一个元素时|拖拽| |`drag`|ondrag| 当元素被拖动期间按一定频率触发|拖拽| |`dragend`|ondragend| 当拖动的元素被释放（🖱️松开、按键盘 ESC）时|拖拽| |`dragenter`|ondragenter| 当拖动元素到一个可释放目标元素时|放置| |`dragexit`|ondragexit| 当元素变得不再是拖动操作的选中目标时|放置| |`dragleave`|ondragleave| 当拖动元素离开一个可释放目标元素|放置| |`dragover`|ondragover| 当元素被拖到一个可释放目标元素上时（100 ms/次）|放置| |`drop`|ondrop| 当拖动元素在可释放目标元素上释放时|放置| 各个事件的时机可以用下面这个图简单表示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ac2bc4b8d7b4c3092864f898a3b597d~tplv-k3u1fbpfcp-zoom-1.image "拖放事件图") **⚠️注意：** [dragOver](https://developer.mozilla.org/en-US/docs/Web/API/Document/dragover_event) 事件的默认行为是：“Reset the current drag operation to "none"”。也就是说，如果不阻止放置元素的 dragOver 事件，则放置元素不会响应“拖动元素”的“放置行为” ``` js // 让绑定该事件的元素支持放置 function handleDragOver(e) { // 阻止默认的重置行为 // 即可成为拖拽元素的放置区 e.preventDefault(); } ``` 从设计事件标准来看，如果我们需要自行实现拖拽的效果，就需要从这关键的几个事件去思考设计。 ## 1.3 DataTransfer 在上述的事件类型中，不难发现，放置元素和拖动元素分别绑定了自己的事件，可如何将拖拽元素和放置元素**建立联系**以及**传递数据**？这就涉及到 `DataTransfer` 对象： > `DataTransfer` 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。 —— [DataTransfer - MDN](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer "DataTransfer - MDN") `DataTransfer` 对象在不同浏览器上因为标准可能不一样使得 API 有差异，但有几个“标准（常用）”属性和方法需要熟悉在 Chrome 浏览器上的 DataTransfer 实例如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b201e470cf714a6ebcb7879c29d50b0d~tplv-k3u1fbpfcp-zoom-1.image "在 Chrome 浏览器上的 DataTransfer 的属性和方法") ### (1) 属性 |属性|说明| |:----|:--| |`dropEffect`| 获取当前选定的拖放操作类型或者设置的为一个新的类型。值为：none、copy、link、move| |`effectAllowed`|提供所有可用的操作类型。值是：none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized| |`files`|包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表| |`items` (只读)|提供一个包含所有拖动数据列表的 DataTransferItemList 对象| |`types` (只读)|提供一个 dragstart 事件中设置的格式的 strings 数组。| ### (2) 方法 |属性|说明| |:--|:--| |`setData(format, value)`|设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。| |`getData(format)`|检索给定类型的数据，如果该类型的数据不存在或 data transfer 不包含数据，则返回空字符串| |`clearData([format])`|删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据。如果指定类型的数据不存在，或者 data transfer 中不包含任何数据，则该方法不会产生任何效果。| |`setDragImage(img|element, xOffset, yOffset)`|设置自定义的拖动图像，注意图像需要提前加载，否则会无效| 在简单的拖拽场景中，其实可以类比 **window.localStorage** 对象的 `setItem()` 和 `getItem()` 方法来理解记忆. 但 `getData()` 在测试中发现只能在 `ondrop` 事件中获取到值: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/220c8d6b604e4b4bbc4e738229a8ca3c~tplv-k3u1fbpfcp-zoom-1.image "image") ## 1.4 一个案例掌握拖放 API ``` html

拖动元素

放置区域

``` **演示案例：** [https://codepen.io/DYBOY/pen/eYeyvWm](https://codepen.io/DYBOY/pen/eYeyvWm) **效果：** ![演示](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d95bc468582b4478b0b6d68a32b1fab4~tplv-k3u1fbpfcp-zoom-1.image "演示效果") ![拖拽演示效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5d2b574a6554acbb2b7ee85619df5ec~tplv-k3u1fbpfcp-zoom-1.image "拖拽演示效果") ## 1.6 兼容性是 HTML5 标准提出的能力，因此各大浏览器厂商对于标准的支持有差异，其兼容性参考如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8be2d309ef4a450989a0cadfb23f611f~tplv-k3u1fbpfcp-zoom-1.image "caniuse drag drop") 相较于传统的通过鼠标事件：`mousedown`、`mousemove`、`mouseup` 组合实现的拖拽要简单很多，少了放入目标边界的判断，也少了对位置的实时获取操作。另外目前的 API 不算多，例如我们想要定制化拖拽的图片大小、鼠标样式等，目前暂时没发现比较方便的解决方式，但是从另一个角度来说，让我们对于拖拽能力的设计和标准有了一个更深切的认识，对于设计实现拖拽交互有了一个“理论”基础！ # 二、手搓一个有了上面的基础知识，那么实现一个列表拖拽排序并不是什么难事。 ## 2.1 设计实现结合上述的 Drag & Drop 的事件类型，那么拖拽排序主要是针对“拖动对象”之间相互作用关系的逻辑梳理，此处我们暂且区分为： - **源对象：** 拖拽列表中被拖动的单个列表项 - **目标对象：** 拖拽列表中和“源对象”产生“相互作用”的列表项整体的交互事件的设计思路如下： ### (1) ondragstart 此时开始拖拽“源对象”的时机，在此事件回调函数中改变“源对象”的样式，设置拖拽的一些传递参数等初始值。 ``` js // 源对象开始拖拽 const handleDragStart = (e: React.DragEvent) => { e.dataTransfer.effectAllowed = "move"; setDragId(e.currentTarget.dataset.index); // 从 dataset 获取拖拽项的 id }; ``` ### (2) ondragover 正与拖拽中的“源对象”产生相互影响的目标对象，此时“源对象”处于“目标对象”的正上方，目标对象 100ms/次的频率调用“目标对象”的 `ondragover` 中声明的回调事件。此时，我们会计算改变“**源对象**”和“**目标对象**”的位置。 ``` js // 源对象在目标对象上方时 const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); // 允许放置，阻止默认事件 const dropId = e.currentTarget.dataset.index; move(dragId, dropId); // 改变原列表数据 }; ``` ### (3) ondrag 该事件作用于“源对象”，此时正处于拖拽过程中，此时可以改变源对象的 `opacity`、`display(none)`、`visiblity` 样式属性，如果在 `dragstart` 事件改变，则会导致拖拽拷贝对象丢失。 ``` js // 源对象被拖拽过程中 const handleDrag = (e: React.DragEvent) => { e.currentTarget.style.opacity = "0"; }; ``` ### (4) ondragend 在松手完成“源对象”的放置时，主动调用绑定在“源对象”身上的事件，此时恢复更改的样式。 ``` js // 源对象被放置完成时 const handleDragEnd = (e: React.DragEvent) => { e.currentTarget.style.opacity = "1"; }; ``` ## 2.2 实现效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf398c2c3d5e4f88b0d6684e0bb9d04f~tplv-k3u1fbpfcp-zoom-1.image "演示效果") ## 2.3 加点动画上面的实现中效果还算可以，但是少了拖拽项的切换过程动画，直接在 dragover 事件中通过 `move(dragId, dropId)` 方法直接修改了原列表数据的排序，导致切换突变。借助 `animation` 新增 CSS 帧动画： ``` css @keyframes dropUp { 100% { transform: translateY(5px); } } @keyframes dropDown { 100% { transform: translateY(-5px); } } .drop-up{ animation: dropUp 0.3s ease-in-out forwards; } .drop-down{ animation: dropDown 0.3s ease-in-out forwards; } ``` 同样的在 `dragOver` 事件中处理，新增逻辑代码： ``` js // 源对象在目标对象上方时 const handleDragOver = (e: React.DragEvent) => { ... // 设置动画 const dropId = e.currentTarget.dataset.index; const dragIndex = findIndex(listData, (i) => i.id === dragId); const dropIndex = findIndex(listData, (i) => i.id === dropId); // 通过增加对应的 CSS class，实现视觉上的动画过渡 e.currentTarget.classList.remove("drop-up", "drop-down"); if (dragIndex < dropIndex) { e.currentTarget.classList.add("drop-down"); } else if (dragIndex > dropIndex) { e.currentTarget.classList.add("drop-up"); } ... }; ``` 增加了动画的效果： ![增加了动画的效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c91401fe76364dc78d2097a1bce2a2a6~tplv-k3u1fbpfcp-zoom-1.image "增加了动画的效果") 看起来似乎好一点了，当然大家可以去扩充动画的效果，亦或者借助三方动画库。 # 三、已有拖拽库目前主流的拖拽库有： - **react-dnd:** https://github.com/react-dnd/react-dnd/ - **react-beautiful-dnd:** https://github.com/atlassian/react-beautiful-dnd/ - **sortablejs:** https://sortablejs.github.io/Sortable/ - **react-sortable-hoc:** https://github.com/clauderic/react-sortable-hoc/ 关于几者的差异，可以参阅：《[关于react中使用拖拽插件的评测](https://juejin.cn/post/6956112150989373448 "关于react中使用拖拽插件的评测")》 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a53a4dd792a41a591140c402d7c93c4~tplv-k3u1fbpfcp-zoom-1.image "对比使用趋势图") # 四、总结由于低代码平台其实会有丰富的拖拽场景，从可扩展和兼容性上考虑，最终选择了 `react-dnd` 作为基础拖拽库，当然，在复杂的拖拽场景下，是需要自行扩展该拖拽库，上手难度相对会高一点，不过有了这些“拖拽知识”作为前置基础，那么扩展功能也就不是什么难事了。朋友们可以关注微信公众号：**[DYBOY](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e790d334b0b740679b424ee3c81d4201~tplv-k3u1fbpfcp-watermark.image)**，来一起玩耍呀～