拖放API是浏览器原生事件机制，需通过draggable="true"启用拖拽、dragover中preventDefault允许放置、dragstart设置dataTransfer数据、drop中获取并执行操作。

拖放 API 是浏览器原生提供的一套事件机制，用于支持用户通过鼠标（或触摸）拖拽元素并放置到目标区域的交互行为。它不是某个单独的函数，而是一组配套的事件和方法，核心在于 dragstart、dragover、drop 这三个关键环节的配合。

拖放的基本流程和必要步骤

要让一个元素可拖，另一个元素能接收，必须满足几个硬性条件：

• 被拖拽的元素需设置 draggable="true" 属性（默认 false， 和 除外）
• 目标区域必须阻止 dragover 的默认行为，否则 drop 事件不会触发
• 在 dragstart 中用 dataTransfer.setData() 存储数据（如文本、ID、JSON 字符串）
• 在 drop 中用 dataTransfer.getData() 取出数据，并执行实际操作（比如移动 DOM、更新状态）

常见写法：一个可拖列表项到容器的示例

假设你有一个任务列表，想把任务拖进「已完成」区域：

  写周报
  回邮件


拖到这里完成

对应 JS：

// 让每个 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，就能稳稳跑起来。