跨窗口拖拽必然失败，因draggable="true"仅开启拖拽开关，必须在dragstart第一行同步调用e.dataTransfer.setData("application/json", JSON.stringify(payload))并双写text/plain兜底，否则Firefox/Safari无法接收数据。
dragstart里不调setData()，跨窗口拖拽必然失败
设了 draggable="true" 只是让浏览器允许拖动，它不传数据、不触发传输、不绑定上下文。跨窗口场景下，一旦 dragstart 事件中没调 e.dataTransfer.setData()，整个拖拽链在源头就中断——目标窗口连 dragenter 都收不到，更别说 drop。
常见错误包括：
-
dragstart监听器根本没绑定，或绑错元素（比如绑在父容器上，但实际拖的是子节点） - 写了监听器，但漏掉
setData()，或传了undefined、空字符串""—— Firefox 会直接判定为无效，静默丢弃 - 用了非标准 MIME 类型，比如
"mydata"或"Text"（大小写敏感），Chrome 可能容忍，Firefox 和 Safari 会忽略
application/json 必须双写 text/plain 才能兜底
text/plain 在跨窗口场景下不是“备用格式”，而是高危路径：它不解析结构、不保留换行、不转义引号、不保证编码一致。含中文或嵌套 JSON 的字符串（如 {"user":{"name":"张三"}}）在 Safari 或旧 Edge 中常被截成 {"user":{，JSON.parse() 直接抛 SyntaxError。
application/json 是正解，但兼容性有坑：
立即学习“前端免费学习笔记（深入）”；
- Safari 16.6 之前完全不识别该类型，
getData("application/json")返回空字符串 - 必须显式调用
JSON.stringify(payload)，不能直接传对象 - 安全写法是双写：
e.dataTransfer.setData("application/json", JSON.stringify(payload))+e.dataTransfer.setData("text/plain", JSON.stringify(payload)) - 读取端优先尝试
getData("application/json")，失败立即 fallback 到text/plain再JSON.parse()
别信 event.dataTransfer.types，它在跨窗口下基本没用
很多代码靠 event.dataTransfer.types 判断可用格式，但在跨窗口时完全不可靠：
- Safari 返回空数组
[] - Firefox 固定返回
["text/plain"]，哪怕你只设了application/json - Chrome 行为也不稳定，尤其跨 origin 或 iframe 时
正确做法是：写入时双格式全设，读取时按固定顺序尝试，不查 types 数组。
数据必须在 dragstart 第一毫秒固化，不能等 drop 时再读 DOM
跨窗口拖拽过程中，源窗口可能被快速切走、最小化、滚动或失焦。dragstart 触发后几十毫秒内，e.target.dataset.payload 或 e.target.getAttribute("data-id") 就可能失效——尤其在 Vue/React 动态渲染节点中，DOM 已更新或卸载。
推荐固化方式：
- 提前把 payload 序列化好，挂到元素实例上：
el._dragPayload = {id: 123, type: "card"} - 或用
data-payload预存字符串：<div draggable="true" data-payload='{"id":123,"type":"card"}'> - 在
dragstart回调第一行就读取并立即setData()，不加任何异步或条件分支
真正难的不是写对 draggable="true"，而是在 dragstart 那一帧里，把数据稳稳塞进 dataTransfer，且确保目标窗口能原样拿出来——晚一步，就全崩。
