dragstart里不调setdata()跨窗口拖拽必然失败；设draggable="true"仅开启拖拽开关，必须在dragstart第一行同步调用e.datatransfer.setdata("application/json", json.stringify(payload))并双写text/plain兜底，否则firefox/safari均无法可靠接收数据。
dragstart里不调setData()，跨窗口拖拽必然失败
设了draggable="true"只是打开拖拽开关，不代表数据能传出去。浏览器在dragstart事件里发现e.dataTransfer.setData()没被调用，就直接中断整个拖拽链——目标窗口根本收不到任何事件，更别说读取数据。
常见错误包括：dragstart监听器压根没绑、绑了但漏写setData、传了undefined或空字符串。Firefox 尤其严格，连""都会当无效处理。
- 必须在
dragstart回调第一行就调用e.dataTransfer.setData() - 不要在
dragstart里做异步操作（比如fetch或getAttribute），源页面可能已失焦，DOM 属性读不到 - 推荐提前把 payload 序列化好存到元素上：
el._dragPayload = {id: 123, type: "card"}，再在dragstart里直接取用
跨窗口必须用application/json + JSON.stringify，text/plain会丢结构
text/plain不是“备用格式”，而是跨窗口场景下的失效路径：它不保留换行、不处理引号转义、不保证编码一致，遇到中文或嵌套对象（如{"meta":{"name":"张三"}}）大概率被截断或返回乱码。Safari 和旧 Edge 对它的解析更不可靠。
application/json才是正解，但要注意兼容性陷阱：
- 必须显式调用
JSON.stringify(payload)，不能直接传对象 - Safari 16.6 之前不识别
application/json，会 fallback 到空字符串 - 安全写法是双写：
e.dataTransfer.setData("application/json", JSON.stringify(payload))+e.dataTransfer.setData("text/plain", JSON.stringify(payload)) - 读取端优先尝试
getData("application/json")，失败再 fallback 到text/plain并JSON.parse()
drop事件里别信dataTransfer.getData()，Firefox基本返回空
Firefox 在跨窗口 drop 时，e.dataTransfer.getData("application/json") 经常返回空字符串，这不是 bug，是规范允许的安全限制——尤其在跨 origin 或 iframe 场景下。依赖它传 ID 或索引，等于默认放弃 Firefox 用户。
真正稳定的做法是绕过getData()：
- 用
WeakMap全局缓存 payload，key 用e.dataTransfer本身（它在同次拖拽中是同一引用） - 或者在
dragstart里生成唯一 key（比如Date.now() + Math.random()），存在元素 dataset 上，drop 时通过e.target反查 - 避免用
e.dataTransfer.types判断可用类型——Safari 返回空数组，Firefox 只报["text/plain"]，完全不可靠
dragstart触发后几毫秒内必须完成数据读取
跨窗口拖拽时，源页面可能被快速切走、最小化或滚动，e.target在dragstart回调执行完后几十毫秒内就可能无法稳定访问其 dataset 或自定义属性。Vue/React 动态渲染的节点尤其危险——e.target.getAttribute("data-id")很可能拿到旧值甚至null。
解决方案只有一个：数据准备前置。
- 拖拽开始前，就把完整 payload 序列化并挂载到元素上：
el.dataset.payload = JSON.stringify({id: 123, type: "tab"}) - 或用私有属性：
el._dragData = {id: 123, type: "tab"} -
dragstart里只做两件事：阻止默认行为、调setData，其余全是同步读取，不碰 DOM 查询
跨窗口拖拽真正难的不是 API 调用，而是时机控制和数据落地的一致性。一旦依赖运行时动态读取，就掉进浏览器行为差异的坑里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
