不能。draggable="true"仅支持同文档内拖放，跨窗口（含iframe、新tab、弹窗）时dragover被安全策略拦截，preventDefault()无效，dataTransfer为空，drop事件不触发；需改用mousedown/mousemove/mouseup配合postMessage模拟。
draggable="true" 能不能跨窗口拖拽？
不能。原生 draggable 属性只支持同文档内拖放，浏览器明确禁止跨窗口（包括 iframe、新 tab、弹窗）的 dragstart → drop 数据传递。即使两个页面都设置了 draggable="true" 并监听了事件，目标窗口的 drop 事件根本不会触发——因为 dragover 阶段就被拦截了，preventDefault() 在跨窗口场景下无效。
为什么 dragover.preventDefault() 在跨窗口失效？
这是浏览器安全策略决定的：dataTransfer 对象在跨窗口时被清空或冻结，dragover 事件虽能触发，但调用 e.preventDefault() 不会解除“禁止投放”状态。你看到的现象通常是：拖入另一窗口时鼠标变成禁止符号（?），松手后什么也不发生，控制台也无错误。
-
dataTransfer.getData()在跨窗口drop中始终返回空字符串 -
dataTransfer.types在跨窗口drop中为空数组 - 即便用
text/plain或application/json设置数据，目标页也无法读取
替代方案：用 postMessage + 手动拖拽模拟
真要实现跨窗口拖拽效果，得绕过原生 API，用 mousedown/mousemove/mouseup 捕获拖动过程，再通过 window.postMessage() 向目标窗口发送结构化数据（如元素 ID、坐标、payload）。关键点：
- 源窗口在
mousedown时记录目标窗口引用（opener或iframe.contentWindow） - 拖动中用
requestAnimationFrame发送实时位置，避免卡顿 - 目标窗口监听
message事件，根据 payload 渲染预览或执行插入逻辑 - 必须手动处理视觉反馈（比如画一个半透明代理元素跟随鼠标）
注意：postMessage 要校验 event.source 和 event.origin，防止恶意窗口注入。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的兼容性细节
哪怕在同域 iframe 内，Safari 对 dataTransfer 的跨 frame 支持依然不稳定——它可能允许 dragenter，但拒绝 drop。所以别依赖 draggable 做跨容器布局，尤其是管理后台类应用。真正健壮的做法是：统一用可序列化的状态驱动 UI，拖拽只是触发器，不是数据通道。
