要实现拖放功能需设置draggable="true"，并通过dragstart、dragover、drop等事件配合dataTransfer传递数据，其中dragover必须调用preventDefault才能触发drop。
拖放功能在现代网页中很常见，比如文件上传、任务排序、拼图游戏等场景。JavaScript 提供了原生的拖放 API（Drag and Drop API），无需依赖第三方库就能实现基本的拖放交互。下面介绍如何使用该 API 实现元素的拖放。
启用拖拽：设置 draggable 属性
要让一个元素可拖动，必须设置其 draggable="true" 属性。这是触发拖放操作的前提。
例如：<div id="dragElem" draggable="true" style="background: lightblue; padding: 20px;">拖动我</div>
只有设置了 draggable="true" 的元素才能触发拖放事件。
立即学习“Java免费学习笔记（深入）”；
关键拖放事件详解
拖放过程涉及多个事件，主要分为两类：被拖动元素的事件和目标区域的事件。
常用事件包括：
- dragstart：拖动开始时触发，通常在这里设置拖动数据
- drag：拖动过程中持续触发
- dragend：拖动结束（无论是否释放成功）
- dragenter：被拖元素进入目标区域
- dragover：被拖元素在目标区域上移动，需阻止默认行为才能触发 drop
- drop：在目标区域释放元素时触发，处理放置逻辑
- dragleave：被拖元素离开目标区域
实现拖放的基本步骤
以下是一个简单的文本拖放示例，将一个 div 拖到另一个容器中。
HTML 结构：
<div id="source" draggable="true" style="background: yellow; padding: 20px;">拖动我到下方盒子
</div>
<div id="target" style="width: 200px; height: 100px; background: #eee; border: 2px dashed #999; margin-top: 20px; text-align: center; line-height: 100px;">
放下到这里
</div>
JavaScript 代码：
const source = document.getElementById('source');const target = document.getElementById('target');
source.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', source.innerText);
});
target.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须阻止默认行为，否则 drop 不会触发
});
target.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
target.innerText = data;
});
说明：
- e.dataTransfer 用于在拖放过程中传递数据
- dragover 事件中调用 preventDefault() 是必须的，否则无法触发 drop
- 可以在 setData() 中使用不同类型的数据类型（如 'text/html'、自定义类型等）
高级技巧与注意事项
实际开发中可能需要更精细的控制：
- 通过 effectAllowed 和 dropEffect 控制拖放效果（如复制、移动、链接）
- 使用 CSS 类在 dragenter 和 dragleave 时高亮目标区域
- 支持拖放文件（如从桌面拖入上传区），可通过 e.dataTransfer.files 获取文件列表
- 移动端不原生支持拖放 API，需结合 touch 事件模拟
基本上就这些。原生拖放 API 虽然简单，但在大多数基础场景中足够使用，理解核心事件流是关键。不复杂但容易忽略的是 dragover 中阻止默认行为这个细节。
