HTML5原生拖拽API不支持跨iframe，需主页面统一接管并协同子框架实现委托式控制：主页面监听drag事件、计算iframe内坐标、通过postMessage通信，iframe需注册区域、暴露handleDrop方法并做好坐标转换与安全校验。
HTML5 原生拖拽 API（drag / drop 事件）本身不跨 iframe 或跨源窗口，但在同源、同域、且目标框架可访问的前提下，可通过事件代理 + 框架间通信协作实现“视觉上连续”的跨框架拖拽体验。核心不是让原生 drag 事件穿透 iframe，而是由主文档统一接管拖拽流程，各子框架协同上报位置与状态。
跨框架拖拽的本质是“委托式控制”
浏览器禁止原生 drag 事件跨 iframe 冒泡或捕获，因此不能直接在 iframe 内监听 drop 并期望主页面触发。可行路径是：
- 主页面监听全局
dragstart（来自任意可拖元素，包括 iframe 内通过window.parent.postMessage上报的“模拟拖起”信号） - 拖拽过程中，主页面持续监听
dragover和鼠标移动，结合document.elementFromPoint()或 iframe 的getBoundingClientRect()计算当前悬停在哪个 iframe 及其内部坐标 - 主页面将实时坐标、拖拽数据等通过
postMessage推送至对应 iframe，由 iframe 内部决定是否高亮、校验、准备接收 - 当用户松开鼠标（
drop），主页面捕获drop事件，再根据最后悬停的 iframe 和坐标，转发 drop 数据并触发其内部逻辑
关键步骤：iframe 内需主动配合注册
每个参与拖拽的 iframe 必须提前向父页面注册自身区域和能力，例如：
- iframe 加载完成后，向
window.parent发送{ type: 'DRAG_TARGET_REGISTER', id: 'editor-1', bounds: elem.getBoundingClientRect() } - 主页面维护一个 target map，记录各 iframe 的 DOM 引用、边界、支持的数据类型（如
text/plain、自定义application/json） - iframe 内部暴露一个
window.handleDrop(data, clientX, clientY)方法供父页面调用（需确保同源，否则只能走 postMessage）
坐标转换必须手动对齐
iframe 内部坐标系与主文档独立，拖拽时的 event.clientX/clientY 是主文档视口坐标，需转为 iframe 内部坐标：
立即学习“前端免费学习笔记（深入）”；
- 获取 iframe 元素在主文档中的
getBoundingClientRect() - 减去 iframe 的
scrollLeft/scrollTop（若 iframe 可滚动） - 再减去 iframe 自身的
offsetLeft/offsetTop（若存在 CSS 偏移） - 最终得到相对于 iframe
contentDocument.body左上角的坐标，传入 iframe 内部用于定位 drop 区域
数据传递建议用结构化克隆，而非原始 DataTransfer
DataTransfer 对象无法跨 iframe 序列化，也不能被 postMessage 传递。替代方案是：
- 在
dragstart阶段，主页面提取必要字段（如data.getData('text/plain')、自定义 JSON 元数据）生成轻量对象 - 将该对象通过
postMessage发送给所有已注册的 iframe，用于预加载或预校验 - 真正
drop时，只发送该对象 + 精确坐标，避免重复解析或权限问题
不复杂但容易忽略：务必在 iframe 卸载前注销注册，主页面监听 message 时过滤来源 origin，并对所有传入坐标做边界判断，防止越界操作。
