原生拖拽需在dragstart中调用dataTransfer.setData()，否则后续事件失效；dragover必须preventDefault()且目标元素需可接收；drop时getData类型须与setData严格匹配；移动端不支持该API。
dragstart 事件里必须设置 dataTransfer
HTML5 原生拖拽不是“拿起来就走”，dragstart 中不调用 dataTransfer.setData()，后续所有拖拽事件（dragover、drop）都会失效——浏览器直接忽略。常见错误是只加了 draggable="true" 就以为完事了。
-
dataTransfer.setData("text/plain", "item-123")是最简可用写法；类型字符串不能乱写，"text/plain"和"text/html"兼容性最好 - 若要传结构化数据（如 ID 或 JSON），仍需用字符串序列化：
dataTransfer.setData("application/json", JSON.stringify({id: 1, type: "card"})) - 不设
dataTransfer.effectAllowed时，默认允许复制+移动，但某些浏览器（如 Safari）会限制为仅复制，显式设成"move"更可控
dragover 事件必须阻止默认行为
dragover 默认被浏览器阻止，否则 drop 根本不会触发——这是最常被卡住的点。光监听没用，关键在事件处理函数里加 event.preventDefault()。
- 只写
event.preventDefault()不够，还要确保该元素本身支持接收拖入（比如不是而是contenteditable的容器）- 如果想高亮目标区域，可在
dragover里动态加 class：event.target.classList.add("drag-over")，但记得在dragleave清掉- 不要在
dragover里做重计算或 DOM 操作，它触发极频繁，容易卡顿drop 事件中读取 dataTransfer 数据要匹配 setData 类型
drop里用dataTransfer.getData("text/plain")取不到值？大概率是setData和getData的类型字符串不一致。类型名区分大小写，且部分浏览器对自定义类型（如"myapp/item"）支持有限。- 优先用
"text/plain"传输简单标识符，兼容性最佳 - 若用了
setData("application/json", ...)，getData("application/json")在 Firefox/Chrome 可用，但 Safari 会返回空字符串——此时应 fallback 到getData("text/plain") -
dataTransfer.files只在用户从文件系统拖入时存在，和setData无关，别混淆
移动端不支持原生 drag/drop API
所有 iOS Safari 和多数安卓 WebView（包括 Chrome for Android 的非桌面模式）完全忽略
draggable属性和相关事件。这不是 bug，是规范未要求实现。试图在移动端靠这套逻辑做排序列表或画布拖拽，必然失败。立即学习“前端免费学习笔记（深入）”；
- 真实方案是监听
touchstart→touchmove→touchend，自己模拟位移和释放逻辑 - 可复用
pointerdown/pointermove/pointerup统一处理，但要注意touch-action: none阻止默认滚动 - 第三方库如
interact.js或sortablejs（启用forceFallback: true）已封装这些细节，比手写更稳
原生拖拽看着简单，但跨浏览器行为差异、移动端缺失、dataTransfer 类型匹配松散，让实际集成比预期脆弱得多。真正上线前，至少要在 iOS Safari、Chrome Android、桌面 Edge 上各跑一次完整拖放流程。
- 如果想高亮目标区域，可在
