HTML5 拖放 API 实现拖拽排序
请详细说明 HTML5 Drag and Drop API 的事件流、DataTransfer 对象的使用方法，并实现一个可拖拽排序的列表组件。draggable 属性如何设置？
回答
专业代码师
事件流: dragstart, drag, dragenter, dragover, dragleave, drop, dragend。使元素可拖拽: 设置 draggable=true。dragstart 中设置数据: e.dataTransfer.setData('text/plain', id)。dragover 必须 preventDefault() 才能触发 drop。DataTransfer 方法: setData、getData、clearData、setDragImage 等。files 属性可获取拖入的文件。effectAllowed/dropEffect 控制拖拽光标。排序实现: dragstart 记录索引，dragover 判断位置，drop 时交换 DOM。注意：移动端不支持 HTML5 DnD，需 touch 事件替代。