draggable="true"仅启用拖拽事件链，不自动传数据；所有数据必须手动通过dataTransfer setData/ getData传递，且跨窗口时受同源策略限制，需用SharedWorker、postMessage或WeakMap等替代方案。
draggable="true" 本身不传数据，只触发事件链
设置 draggable="true" 只是告诉浏览器“这个元素可以被拖”，它不会自动序列化 DOM、不携带任何业务数据、也不跨 iframe 或窗口共享状态。所有数据传递必须靠开发者手动注入和提取——dataTransfer 对象只是个临时中转站，且受同源策略和浏览器安全限制严格约束。
常见错误是以为在 A 窗口 dragstart 中调用 e.dataTransfer.setData('application/json', JSON.stringify(data))，就能在 B 窗口的 drop 里用 e.dataTransfer.getData('application/json') 拿到完整结构。实际上：
- 跨窗口（包括
window.open()或 iframe）时，Firefox 和 Safari 基本返回空字符串 - Chrome 虽可能返回，但仅限同源且无 sandbox 属性的 iframe
-
text/plain格式最稳妥，但只能传字符串，无法保留函数、Date、Blob 等类型
跨窗口拖拽必须绕过 dataTransfer 依赖全局状态
真正可行的做法是放弃依赖 getData()，改用共享内存机制同步拖拽元数据：
- 主窗口和子窗口共用同一个
SharedWorker，通过postMessage同步拖拽 ID 和 sourceTab 引用 - 或使用
localStorage+ storage 事件监听（注意：需处理竞态，加时间戳+随机 key） - 更轻量的方案：主窗口维护
WeakMap映射dataTransfer实例 → 拖拽上下文，再通过window.opener或iframe.contentWindow主动推送索引
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
const dragState = new WeakMap();
document.addEventListener('dragstart', e => {
const tabEl = e.target.closest('.tab');
if (tabEl) {
dragState.set(e.dataTransfer, {
id: tabEl.dataset.tabId,
type: tabEl.dataset.tabType,
timestamp: Date.now()
});
// 不依赖 setData，只设 effectAllowed 提示用户
e.dataTransfer.effectAllowed = 'move';
}
});
子窗口 drop 时，不查 getData()，而是通过 window.opener?.getDragState?.(e.dataTransfer) 获取原始数据。
dragover 必须 preventDefault，否则 drop 永远不会触发
这是跨窗口场景中最常卡住的点：即使你把 dragover 监听器绑在目标窗口的 document 上，只要没在事件回调里调用 e.preventDefault()，浏览器就默认禁止投放——drop 事件根本不会派发。
- 必须在
dragover和dragenter两个事件里都调用e.preventDefault() - 不能只写
ondragover="return false"，因为内联 handler 不会阻止默认行为，必须用addEventListener并显式调用 - 如果目标区域是 iframe 内容，需确保 iframe 的
sandbox属性不含"allow-scripts"以外的限制（否则 dragover 事件压根不会进入）
视觉反馈与键盘/无障碍支持不能省略
跨窗口拖拽一旦缺乏即时反馈，用户极易误判是否进入目标区域。尤其当窗口被遮挡、缩放或高 DPI 下，光标偏移会让 dragover 判断失准：
- 用
document.elementFromPoint(x, y)替代单纯监听dragover元素，实时判断鼠标正下方是否为合法 dropzone - 对键盘用户，需监听
keydown中的Enter/Space触发模拟 drop，并用aria-dropeffect="move"和aria-grabbed="true"暴露状态 - Firefox 不支持
dataTransfer.setDragImage()自定义图标，所以 fallback 方案必须存在（比如悬浮 tooltip 显示 “松开以移动到 [窗口名]”）
真正难的不是让两个窗口能通信，而是让整个过程在各种分辨率、缩放比例、焦点模式下都不掉帧、不丢状态、不误导用户——这些细节不补全，跨窗口拖拽就是个半成品。
