原生 Drag and Drop API 并非开箱即用：仅支持文件/链接/文本拖放，需手动处理事件与状态；dragstart 中 setData 仅 text/plain 等受限类型可靠，跨元素传 JSON 会被清空；dragover 必须同步 preventDefault() 才能触发 drop；列表排序推荐用 SortableJS 等库而非手写。
浏览器原生的 Drag and Drop API 不是“开箱即用”的交互方案，它默认只支持文件、链接、文本等有限类型拖放，且必须手动处理大量事件和状态逻辑；直接用它实现列表排序或组件拖拽，很容易卡在 dragover 阻止默认行为、drop 事件不触发、或数据传递失败上。
为什么 dragstart 设置了 dataTransfer 却在 drop 里取不到？
这是最常踩的坑：浏览器对 dataTransfer.setData() 的数据类型和调用时机有严格限制。非文本/URL 类型（比如 application/json）在跨元素拖放时会被清空，且只有在 dragstart 中设置才有效 —— 其他事件中调用无效。
-
setData('text/plain', 'item-123')可靠，适合传 ID -
setData('text/html', '<div>...</div>')可用于预览，但目标端需解析 HTML - 避免用
setData('application/json', JSON.stringify(obj))，多数浏览器会静默丢弃 - 若需传结构化数据，改用全局变量暂存（如
window.__dragData = { id: 'x', type: 'card' }），在drop中读取后立即清理
dragover 事件不触发？一定是没阻止默认行为
dragover 是唯一能被取消默认行为的拖放事件，而浏览器只在该事件被 preventDefault() 后，才允许后续触发 drop。漏掉这一步，drop 永远不会来。
- 必须在
dragover回调里写event.preventDefault() - 仅
preventDefault()不够，还需设置event.dataTransfer.dropEffect = 'move'（或'copy'）才能显示正确光标 - 不要在节流或异步回调里调用
preventDefault()—— 它必须同步执行 - 如果目标是整个页面，监听
document的dragover更稳妥，避免因 DOM 更新导致监听丢失
怎样让列表项可拖拽排序？别从零写 Drag and Drop API
纯用原生 API 实现列表拖拽排序，要自己计算插入位置、处理占位符、防抖 dragenter/dragleave、兼容触摸设备……实际开发中几乎没人这么做。
立即学习“Java免费学习笔记（深入）”；
- 优先考虑轻量库：
SortableJS（无依赖）、react-dnd（React 场景）、@dnd-kit/core（现代 React 推荐） - 若必须手写，用
dragstart记录拖拽项索引，dragover用event.clientY对比目标元素getBoundingClientRect()的中线，判断插入点在上方还是下方 - 禁用
user-select: none或pointer-events: none的元素无法触发拖拽起点，检查 CSS 是否意外屏蔽了dragstart - 移动端无原生
Drag and Drop API支持，Safari/iOS 必须降级为touchstart+touchmove模拟
真正难的不是监听几个事件，而是处理视觉反馈时机、插入位置判定精度、以及跨 iframe 或 shadow DOM 的边界情况 —— 这些细节一旦出错，拖放就会“看起来动了，但实际没反应”。
