原生 drag 和 drop API 失效主因是未在 dragstart 中调用 dataTransfer.setData() 或未在 dragover 中调用 preventDefault()；前者导致事件链中断，后者使 drop 无法触发，且 getData 类型必须与 setData 严格一致。
原生 drag 和 drop API 表面简单，实际容易卡在事件不触发、数据传不出、跨元素失效这几个地方。核心问题不是“会不会写”，而是“为什么写了没反应”。
dragstart 事件里必须设置 dataTransfer 数据，否则 dragover 会被浏览器阻止
很多初学者只加了 ondragstart，但没调用 dataTransfer.setData()，结果后续所有 drop 相关事件（dragover、drop）压根不会触发——这是浏览器默认行为：没携带有效载荷的拖拽，视为无效操作并静默拦截。
-
dataTransfer.setData('text/plain', 'some-id')是最常用且兼容性最好的方式；也可以用'text/html'或自定义类型如'application/json'，但后者需在dragover中显式允许 - 不要只设空字符串或
NULL，某些浏览器（如 safari）会直接忽略 - 如果拖的是文件，
dataTransfer.files会自动有值，此时setData可省略，但drop区域仍需处理preventDefault()
drop 区域必须监听 dragover 并调用 preventDefault()
drop 事件本身不会触发，除非目标元素先成功响应了 dragover。而浏览器对 dragover 的默认行为是“不允许放置”，所以你必须在该事件里立刻调用 e.preventDefault()。
- 只写
ondrop是没用的，dragover不被允许，drop就永远不会来 -
preventDefault()要放在dragover回调第一行，别等逻辑判断完再调——延迟哪怕一帧都可能失效 - 如果需要条件性允许放置（比如只接受图片），可在
dragover中检查e.dataTransfer.types，但依然要先preventDefault()，再做判断
drop 事件中读取 dataTransfer 数据要匹配 setData 时的类型
dataTransfer.getData('text/plain') 必须和 setData('text/plain', ...) 的第一个参数完全一致，大小写敏感，且不能用通配符。类型不匹配就返回空字符串。
立即学习“Java免费学习笔记（深入）”；
- 调试时可打印
e.dataTransfer.types看实际有哪些可用类型 - 避免用
'text'或'String'这类非标准类型，浏览器不认 - 如果拖的是 dom 元素（比如列表项），推荐用
'text/plain'传个唯一 ID，而不是试图序列化整个节点 - 注意：firefox 对
getData()的调用时机更严格，必须在drop事件内调用，离开事件上下文就拿不到
真正难的不是写几行事件绑定，而是理解浏览器把拖放当成一种“跨进程交互”来对待：它默认禁止一切，直到你用 setData 和 preventDefault 明确说“我确认安全”。漏掉其中任一环，整个链路就断在看不见的地方。