Javascript如何实现拖放功能_有哪些事件需要处理？-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-12-22 16:25:02

原创

446人浏览过

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

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

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

哪些元素能被拖动？

默认只有图片（<img alt="Javascript如何实现拖放功能_有哪些事件需要处理？" >）、链接（<a></a>）和选中的文本可拖动。若要让其他元素（如 <div>、<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、更新列表）

一个最小可用示例

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

百度AI开放平台

百度提供的综合性AI技术服务平台，汇集了多种AI能力和解决方案

105

查看详情

立即学习“Java免费学习笔记（深入）”；

```js
const item = document.getElementById('item');
const dropZone = document.getElementById('drop-zone');

item.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', 'item-id'); // 传标识符
});

dropZone.addEventListener('dragenter', e => e.preventDefault());
dropZone.addEventListener('dragover', e => e.preventDefault());

dropZone.addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
if (id === 'item-id') {
dropZone.appendChild(item); // 移动元素
}
});
```