dataTransfer在drop中取不到数据的主因是dragstart未调用setData()或dragover/drop未preventDefault()，导致事件被浏览器阻止；dataTransfer仅临时存在，format须规范（如"text/plain"），文件拖放应直接读files属性而非setData()。
必须用 setData() 和 getData() 配合事件生命周期使用，否则数据根本传不到 drop 事件里。
为什么 dataTransfer 在 drop 里取不到数据
最常见原因是没在 dragstart 中调用 setData()，或漏了 preventDefault() 导致浏览器阻止了 drop 事件。DataTransfer 对象本身不自动持久化——它只在拖拽过程中临时存在，且仅在 dragstart 和 drop 的 event 对象中可访问。
-
dragstart是唯一能写入数据的时机；drag、dragover等事件里调用setData()无效 -
drop事件必须显式调用event.preventDefault()，否则浏览器会忽略整个 drop 行为（包括 dataTransfer） - 如果目标元素没监听
dragover或没在其中调用preventDefault()，drop根本不会触发
setData() 的 format 参数不能乱填
format 不是随便起的字符串，它影响 getData() 能否正确读出内容，也决定浏览器是否允许该类型数据跨源传递。常见合法值有："text/plain"、"text/html"、"application/json"（需转成字符串），但注意：
- 用
"text/plain"最稳妥，兼容性最好，适合传 ID、路径、简单标识符 - 传 JSON 时必须先
JSON.stringify()，读取后要JSON.parse()，不能直接传对象 - 自定义类型如
"myapp/item-id"可以用，但接收端getData("myapp/item-id")必须用完全相同的字符串匹配 - 不要用
"text"或"string"这类非标准 format，多数浏览器会静默失败
文件拖放必须用 files 属性，别碰 setData()
用户拖入文件时，event.dataTransfer.files 是原生 FileList，它和 setData() 无关。试图用 setData("file", ...) 模拟文件是徒劳的——浏览器禁止 JS 向 dataTransfer 注入真实 File 对象（安全限制）。
立即学习“前端免费学习笔记（深入）”；
- 获取拖入文件：直接读
event.dataTransfer.files，它是只读的 - 验证是否含文件：
if (event.dataTransfer.files.length > 0) - 想预览图片？用
URL.createObjectURL(file)，别尝试getData("file")—— 它永远返回空字符串 - 文本/HTML 拖放和文件拖放是两条并行通道，
files和getData()互不影响
effectAllowed 和 dropEffect 不只是装饰
这两个属性控制浏览器光标样式和实际行为，如果设错，用户可能无法完成拖放，尤其在 macOS 或某些浏览器中表现更敏感。
-
effectAllowed = "move"表示你打算从源移除数据，但浏览器不会自动帮你删 DOM —— 你得在drop里手动移除源元素 -
dropEffect = "copy"时，用户松手瞬间光标显示 + 号，但若没在dragstart设置effectAllowed包含"copy"，这个效果会被降级甚至禁用 - 移动端 Safari 对
effectAllowed极其严格，设成"all"反而容易失效，建议明确写"copyMove"或"move" - 它们不影响数据传输本身，但影响用户能否顺利完成操作——这点常被忽略
真正麻烦的不是 API 多难记，而是 dataTransfer 的生命周期极短、依赖事件顺序、且浏览器默认行为处处拦截。写完 dragstart 别急着测 drop，先确认 dragover 有没有 preventDefault()，再检查 drop 事件是否真的进了回调——很多“取不到数据”的问题，其实压根没走到 drop 里。
