Javascript如何实现拖放功能_有哪些事件需要处理？

JavaScript拖放功能基于HTML5 Drag and Drop API，需设置draggable="true"启用非默认可拖元素，关键事件包括dragstart、dragenter、dragover（须preventDefault）、drop等，移动端不支持。

JavaScript 实现拖放功能主要依靠 HTML5 原生的 Drag and Drop API，核心在于正确监听和处理一组特定事件。它不依赖第三方库，但需注意浏览器兼容性（IE10+、Chrome、Firefox、Safari 均支持）以及默认行为的阻止。

哪些元素能被拖动？

默认只有图片（<img alt="Javascript如何实现拖放功能_有哪些事件需要处理？" >）、链接（<a></a>）和选中的文本可拖动。若要让其他元素（如 <p>、<code><li>）可拖，必须设置其 draggable="true" 属性：```html

拖我

关键拖放事件及处理逻辑

整个拖放过程涉及源元素（被拖的）和目标元素（被放置的），需分别监听以下事件：

• dragstart：在拖动开始时触发（只在源元素上）。常用于设置拖拽数据（dataTransfer.setData()）和自定义拖拽样式（如 event.dataTransfer.effectAllowed = "move"）
• drag：拖动过程中持续触发（源元素），一般无需处理
• dragend：拖动结束（无论是否放置成功）时触发（源元素），适合清理状态或恢复 UI
• dragenter：拖拽对象进入目标元素边界时触发（目标元素）。必须调用 event.preventDefault()，否则后续的 drop 事件不会触发
• dragover：拖拽对象在目标元素内移动时持续触发（目标元素）。同样必须调用 event.preventDefault()，否则浏览器会执行默认行为（如打开图片/链接），且 drop 也不会触发
• dragleave：拖拽对象离开目标元素时触发（目标元素），可用于取消高亮等反馈
• drop：在目标元素上释放鼠标时触发（目标元素）。此时可通过 event.dataTransfer.getData() 获取之前设置的数据，完成实际的业务逻辑（如移动 DOM、更新列表）

一个最小可用示例

实现一个 p 从 A 区域拖到 B 区域并移动过去：

标签： javascript java html js json go html5 浏览器 app safari ai