跨窗口拖拽数据应优先使用 WeakMap 绑定 dataTransfer 实例传递 payload，避免依赖 dataTransfer.getData() 的 MIME 类型兼容性问题、编码不一致及截断风险。
draggable 属性本身不传数据，跨窗口传输失败几乎全是 dataTransfer.setData() 用错了类型或没做降级。
为什么跨窗口时 dataTransfer.getData("text/plain") 经常返回空或乱码
浏览器对 text/plain 的处理是“纯文本截断+编码不可控”：它会丢弃换行、转义双引号、不保证 UTF-8 编码一致性。跨窗口时源页用 UTF-8、目标页按 ISO-8859-1 解析，中文直接变 ；嵌套 JSON 如 {"user":{"name":"李四"}} 在 Safari 或旧 Edge 中常被截成 {"user":{ ——JSON.parse() 必然抛 SyntaxError。
Firefox 更激进：即使你设了 setData("text/plain", longJsonStr)，getData("text/plain") 在跨窗口 drop 里大概率为空字符串，这是规范允许的安全限制，不是 bug。
application/json 不是万能的，Safari 16.6 之前根本不认它
很多代码直接写 e.dataTransfer.setData("application/json", JSON.stringify(obj))，但 Safari 16.6 及更早版本压根不识别该 MIME 类型，getData("application/json") 返回空字符串，且不会 fallback 到其他格式。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置双格式：
e.dataTransfer.setData("application/json", jsonStr)和e.dataTransfer.setData("text/plain", jsonStr) - 读取时优先尝试
application/json，失败则立即 fallback 到text/plain再JSON.parse() - 不要依赖
event.dataTransfer.types判断可用类型——Safari 返回空数组，Firefox 固定返回["text/plain"]，毫无参考价值
拖拽开始时必须立刻固化数据，不能等 drop 时再读 DOM
跨窗口场景下，源窗口可能被快速切走、最小化或滚动，dragstart 触发后几十毫秒内，e.target 就可能无法稳定访问 dataset 或属性值，尤其在 Vue/React 动态渲染节点中。
- 禁止在
dragstart里异步读e.target.dataset.payload或调用getAttribute() - 推荐提前把 payload 序列化并缓存在元素上：
el._dragPayload = {id: 123, type: "card"} - 或用
data-payload预存字符串：<div draggable="true" data-payload='{"id":123,"type":"card"}'>
真正可靠的数据通道不是 dataTransfer，而是全局状态映射
Firefox、跨 iframe、Safari 等环境让 dataTransfer.getData() 成为高危操作。生产环境应放弃依赖它传核心 ID 或结构。
稳妥做法是用 WeakMap 绑定拖拽上下文：
const dragState = new WeakMap();
element.addEventListener("dragstart", (e) => {
const payload = { id: element.dataset.id, type: "card" };
dragState.set(e.dataTransfer, payload); // 用 dataTransfer 实例作 key
});
dropZone.addEventListener("drop", (e) => {
e.preventDefault();
const payload = dragState.get(e.dataTransfer);
if (payload) handleDrop(payload);
});
这个方案绕开了所有 MIME 类型兼容性问题，也规避了跨窗口编码和截断风险——但要求你控制好 dataTransfer 实例生命周期，别让它被 GC 过早回收。
