HTML5 drag API实现列表拖拽排序

拖拽API（Drag and Drop API）是HTML5提供的一组功能，使得在网页上实现拖放操作变得更加简单和强大。这个API允许开发者为网页元素添加拖拽功能，用户可以通过鼠标将元素拖动并放置到指定的目标区域。

事件类型

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
• dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
• dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

Draggable属性

HTML元素可以通过设置draggable属性为true来启用拖动。例如：

<div draggable="true">可拖动的元素</div>复制

DataTransfer对象

这些事件中的event对象包含一个dataTransfer属性，用于存储和传递拖拽的数据。例如，可以使用dataTransfer.setData和dataTransfer.getData方法来设置和获取拖拽的数据。

列表拖拽排序

演示

列表拖拽排序