如何用javascript实现拖放功能_需要哪些事件？

JavaScript原生拖放功能需设置draggable="true"，监听dragstart（设数据）、dragenter/dragover（必须preventDefault）、drop（取数据）等6个事件，注意事件触发顺序与角色分工。

用 JavaScript 实现拖放功能，核心是监听并合理处理一组特定的拖放事件，配合元素的 draggable 属性。不需要第三方库，原生 API 就够用，关键是理清事件触发顺序和各阶段该做什么。

必须设置 draggable 属性

只有显式设置了 draggable="true" 的元素才能被拖动（默认为 false，<img alt="如何用javascript实现拖放功能_需要哪些事件？" > 和 <a></a> 除外）：

关键拖放事件（共 6 个）

拖放过程分“拖动源”和“放置目标”两个角色，不同事件在不同元素上监听：

• dragstart：在被拖元素上触发，**唯一可设置拖拽数据的地方**（用 event.dataTransfer.setData()）
• drag：拖动中持续触发（一般不用）
• dragend：拖动结束（无论是否放下），适合清理状态
• dragenter：被拖元素进入目标区域时触发（第一次进入）
• dragover：**必须阻止默认行为**（event.preventDefault()），否则 drop 不会触发
• drop：在目标元素上松开鼠标时触发，用 event.dataTransfer.getData() 取数据

一个最小可用示例

把 A 区域的文本拖到 B 区域：

标签： javascript java html go ai bing