JavaScript原生拖放功能需设置draggable="true"启用拖动，监听dragstart（设数据）、dragover（必须e.preventDefault()）、drop（取数据）三事件，配合dataTransfer传递数据并实现列表排序等交互。
用JavaScript实现拖放功能，核心是监听drag和drop相关事件，并配合dataTransfer对象传递数据。不需要依赖框架，原生API就能搞定，关键是理解事件触发顺序和dataTransfer的用法。
设置可拖动元素
默认情况下HTML元素不可拖动。要启用拖动，需将元素的draggable属性设为true：
- 拖我试试
- 也可用JS动
态设置：element.draggable = true
- 注意：图片、链接默认可拖，但其他元素必须显式声明
监听拖动生命周期事件
拖放过程分三阶段，对应不同事件：
-
dragstart：鼠标按下并开始拖动时触发，适合设置拖拽数据（如e.dataTransfer.setData('text/plain', 'hello')）
-
dragover：拖动中经过目标区域时持续触发，必须阻止默认行为（e.preventDefault()），否则drop事件不会触发
-
drop：在目标元素上释放鼠标时触发，从中读取数据（如e.dataTransfer.getData('text/plain')）
处理目标区域与视觉反馈
提升体验的关键细节：
- 给目标容器监听dragenter和dragleave，添加/移除CSS类显示高亮（如.drag-over）
- 在dragover里调用e.preventDefault()是必需步骤，否则浏览器执行默认行为（比如打开图片或跳转链接）
- 可设置e.dataTransfer.effectAllowed = 'move'或'copy'，配合dropEffect控制光标样式
实际小例子：列表项排序
把一个里的拖到另一个位置重排：
- 每个li设draggable="true"，在dragstart中存入索引：e.dataTransfer.setData('text/plain', i)
- 给ul监听dragover并阻止默认行为
- 在drop事件中，读取索引，把当前li插入到目标位置（可用insertBefore或appendChild）
基本上就这些。不复杂但容易忽略preventDefault()和dataTransfer的配合，多试几次就顺了。
态设置：element.draggable = true