JavaScript拖放功能依赖原生Drag and Drop API，需设draggable="true"，通过dragstart、dragend、dragenter、dragover、dragleave、drop等事件协同实现数据传递与交互。
JavaScript 实现拖放功能主要依靠原生的 Drag and Drop API，它提供了一套语义明确、浏览器原生支持的事件机制，无需依赖第三方库即可完成元素拖拽、跨区域投放等交互。核心在于理解并合理监听和响应一系列拖放事件。
拖放功能的基本前提
要让一个元素可拖动，必须设置其 draggable 属性为 true（默认为 false）：
拖我试试
关键拖放事件及其触发时机
拖放过程涉及源元素（被拖动者）和目标元素（投放区），不同阶段触发不同事件：
立即学习“Java免费学习笔记（深入）”；
-
dragstart：鼠标按下并开始拖动时触发（在源元素上）。常用于设置拖拽数据（
dataTransfer.setData()）和自定义拖拽视觉效果（如半透明预览）。 - drag：拖动过程中持续触发（源元素上），使用较少，一般不需处理。
- dragend：拖动结束（无论是否投放成功）时触发（源元素上）。适合清理状态、恢复样式等。
-
dragenter：被拖元素首次进入目标区域时触发（目标元素上）。必须调用
event.preventDefault()才能允许后续的drop事件发生。 -
dragover：被拖元素在目标区域内持续移动时频繁触发（目标元素上）。同样需
preventDefault()，否则浏览器会阻止投放；常用来添加高亮样式或计算投放位置。 - dragleave：被拖元素离开目标区域时触发（目标元素上）。可用于移除高亮等反馈样式。
-
drop：用户在目标区域释放鼠标时触发（目标元素上）。此时可通过
event.dataTransfer.getData()获取之前设置的数据，完成实际的业务逻辑（如移动 DOM、更新列表）。
数据传递与类型控制
拖放过程中的数据通过 dataTransfer 对象传递，它是所有拖放事件对象的属性：
- 使用
setData(type, data)在dragstart中存入字符串数据（如"text/plain"、"text/uri-list"或自定义类型如"application/json"）。 - 在
drop中用getData(type)取出对应类型的数据。 - 可通过
dataTransfer.types判断支持哪些数据类型，实现更安全的投放校验。 - 还可设置
dataTransfer.effectAllowed（如"move"、"copy"）和dataTransfer.dropEffect控制光标样式和行为语义。
常见注意事项与技巧
- 目标元素默认不允许接收拖放，必须在
dragenter和dragover中调用preventDefault()，否则drop永远不会触发。 - 避免在
dragover中执行耗时操作，因其触发频率极高，可能影响性能。 - 移动端不支持原生 Drag and Drop API，如需兼容需借助
touchstart/move/end自行模拟，或使用interact.js等库。 - 若需拖拽排序（如列表项），推荐结合
insertBefore()或appendChild()操作 DOM，并配合dragover的坐标判断插入位置。
