拖放API是浏览器原生事件机制，需通过draggable="true"启用拖拽、dragover中preventDefault允许放置、dragstart设置dataTransfer数据、drop中获取并执行操作。
拖放 API 是浏览器原生提供的一套事件机制，用于支持用户通过鼠标（或触摸）拖拽元素并放置到目标区域的交互行为。它不是某个单独的函数，而是一组配套的事件和方法，核心在于 dragstart、dragover、drop 这三个关键环节的配合。
拖放的基本流程和必要步骤
要让一个元素可拖，另一个元素能接收，必须满足几个硬性条件：
- 被拖拽的元素需设置
draggable="true"属性（默认false，<img>和<a>除外） - 目标区域必须阻止
dragover的默认行为，否则drop事件不会触发 - 在
dragstart中用dataTransfer.setData()存储数据（如文本、ID、JSON 字符串） - 在
drop中用dataTransfer.getData()取出数据，并执行实际操作（比如移动 DOM、更新状态）
常见写法：一个可拖列表项到容器的示例
假设你有一个任务列表，想把任务拖进「已完成」区域：
<div id="task-list"> <div class="task" draggable="true" data-id="1">写周报</div> <div class="task" draggable="true" data-id="2">回邮件</div> </div> <div id="done-area" class="drop-zone">拖到这里完成</div>
对应 JS：
立即学习“Java免费学习笔记（深入）”；
// 让每个 task 可拖
document.querySelectorAll('.task').forEach(task => {
task.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', task.dataset.id);
});
});
// 设置 drop 区域
const doneArea = document.getElementById('done-area');
doneArea.addEventListener('dragover', e => {
e.preventDefault(); // 必须！否则 drop 不触发
});
doneArea.addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const task = document.querySelector(`[data-id="${id}"]`);
if (task) doneArea.appendChild(task); // 移动 DOM
});
注意细节：避免踩坑
很多初学者卡在“drop 不生效”，往往是因为：
- 忘了在
dragover里调e.preventDefault() - 误以为
drop会自动移动元素——其实只是通知，DOM 操作得自己写 - 用错
dataTransfer.setData()的类型，比如传对象却不序列化：setData('application/json', JSON.stringify(obj)) - 拖拽跨 iframe 或跨页面时，部分数据类型受限（仅支持字符串），且需同源
增强体验的小技巧
提升真实感，可以加点视觉反馈：
- 在
dragstart给被拖元素加临时 class（比如半透明 + 阴影） - 在
dragenter和dragleave切换目标区域样式（如高亮边框） - 用
e.dataTransfer.effectAllowed和e.dataTransfer.dropEffect控制光标样式（move/copy/link）
基本上就这些。不复杂但容易忽略细节，理清 drag → dragover → drop 这条链，再补上 preventDefault 和 setData/getData，就能稳稳跑起来。
