业务中，列表的拖拽排序需求比较常见，下面记录一下实现过程。包含使用 Vue 和 React 各实现一遍。

基础知识

可参考MDN (opens new window)

在 HTML 中，除了图像、链接和选择的文本默认的可拖拽行为之外，其他元素在默认情况下是不可拖拽的。

要使其他的 HTML 元素可拖拽，需要做三件事：

1. 将想要拖拽的元素的draggable属性设置为true
2. 为dragStart事件添加一个监听程序
3. 在监听程序中设置拖拽数据

drag 事件：dragStart、dragOver、dragEnter、drapEnd

拖拽数据

所有的拖拽事件都有一个 dataTransfer 的属性，是一个 DataTranser 对象，它持有拖拽数据。

发生拖拽时，如果拖拽的是文本框选中的文本，则关联的数据是文本本身，如果拖拽的是链接，则拖拽数据项时链接的 URL。

拖拽数据包含两个信息

• 数据类型 这个可以自定义，也可以使用常用的 MIME-type
• 数据值

在拖拽开始时，我们提供数据类型和数据值，则可以在拖拽过程中，在 dragEnter 和 dragOver 事件中获取到拖拽数据。可以通过数据类型来判断是否允许放置。

放置

在放置拖拽元素时，要通过拖拽数据判断是否接受拖拽元素，如果符合条件，获取拖拽数据，将数据插入到放置的位置

列表拖拽排序

业务场景出现在侧边栏菜单的拖拽排序，菜单包含一级菜单，二级菜单等，放置只能接受当前菜单等级区域。

案例