HTML5拖拽需同时设置draggable="true"和dragstart中调用dataTransfer.setData()；drop事件触发前必须在dragover中preventDefault()；数据类型须严格匹配；需监听dragend、dragleave清理状态。
HTML5 原生拖拽 API 并不难用，但默认行为多、事件链琐碎、浏览器兼容细节多，直接写容易卡在 dragstart 后没反应，或拖着拖着就跳转页面——根本不是“没生效”，而是你没阻止默认行为。
为什么拖不了？draggable 属性和 dragstart 事件缺一不可
仅给元素加 draggable="true" 不够，浏览器不会自动让它可拖；必须监听 dragstart 并至少设置一次 dataTransfer，否则拖拽会静默失败（尤其 Chrome/Firefox）。
-
draggable="true"是前提，但只控制“是否允许拖”，不触发任何逻辑 - 必须在
dragstart中调用event.dataTransfer.setData('text/plain', 'some-value')，哪怕只是空字符串 —— 这是 Safari/Chrome 的硬性要求 - 若拖的是图片或链接，浏览器可能自动启用内置拖拽（比如拖图到桌面），此时你的
dragstart可能根本没机会执行
drop 事件不触发？记得提前阻止 dragover 的默认行为
drop 事件永远不会触发，除非目标区域在 dragover 阶段显式调用了 event.preventDefault()。这是最常被忽略的一步，也是“明明写了 ondrop 却没反应”的元凶。
- 只监听
drop不够，必须同时监听dragover并在其中调用event.preventDefault() -
dragover会高频触发（类似mousemove），别在里面做重操作；单纯阻止默认即可 - 如果目标区是
<div> 等非可聚焦元素，还需加 <code>event.dataTransfer.dropEffect = 'move'（可选，但有助于视觉反馈）怎么传自定义数据？
setData()和getData()类型必须严格匹配dataTransfer.setData('text/html', '<b>hi</b>')存的数据，不能用getData('text/plain')读出来——类型不一致时返回空字符串，且无报错提示。立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
'text/plain'，兼容性最好，也最不容易出错 - 想传结构化数据（如 ID 或 JSON），先
JSON.stringify()再存，drop里再JSON.parse() - 不要依赖
dataTransfer.files传任意数据——它只对真实文件有效，且只在拖入文件时有值 - Safari 对非标准 MIME 类型（如
'application/json'）支持不稳定，别用
拖拽结束后的清理：别忘了
dragend和视觉状态还原拖拽过程中常需要高亮目标区（如加
border: 2px dashed #007bff），但用户中途取消（Esc 键、移出窗口）或拖失败时，样式可能残留。原生 API 不自动还原，得自己管。- 监听
dragend处理成功/失败后的收尾（比如移除临时 class、重置 opacity） - 同时监听
dragleave清除目标区高亮，避免鼠标快速划过多个区域时状态错乱 -
drop触发后，dragend仍会触发，所以状态清理逻辑要能重复执行，或加 flag 判断是否已处理
真正麻烦的不是 API 多难记，而是每个事件都有默认行为、每个浏览器对“空
dataTransfer”的容忍度不同、以及拖拽中途各种中断路径（取消键、页面失焦、跨应用拖出）都需要显式兜底。写完别只测“拖进去”，一定要试 Esc、快速进出、拖到地址栏——那些才是真实用户干的事。 - 推荐统一用
