前言
在前端开发中，iframe是一个相对常见的元素，常用于嵌入外部页面、隔离独立组件或实现复杂的页面布局。如果你恰好遇到 iframe 与父页面之间的拖拽需求，那么这篇文章或许能给你一套清晰可行的解决方案。即便暂时没有这类场景，我们也可以一起了解 iframe 与父容器交互时会遇到哪些典型问题。
复习 iframe 元素
iframe（内联框架）是 HTML 里用来嵌入另一个页面的标签。用法很简单：
html
<iframe
src="https://example.org"
title="iframe 示例"
width="400"
height="300"
></iframe>
嵌入后，你得到一块「窗口里的窗口」：里面有自己独立的 DOM、JS 执行环境和安全边界。正因如此，跨 iframe 的交互 （比如从父页面拖一个块到 iframe 里的区域）会涉及跨文档甚至跨域问题。
下面说说针对这两种不同的情况下实现拖拽的思路
拖拽的两种实现思路
1：HTML5 拖拽 API（draggable + dataTransfer）
把元素设为 draggable="true"，再监听 dragstart、dragover、drop 等事件，用 dataTransfer 在拖拽过程中传数据。这是标准、语义化的做法。
- 拖拽源 ：
dragstart里e.dataTransfer.setData(...)写入要传的内容 - 放置目标 ：
dragover里必须e.preventDefault()，否则不会触发drop；drop里用e.dataTransfer.getData(...)读取
父页面和 iframe 内如果同源 ，这套 API 可以直接跨 iframe 使用：父页拖、iframe 里接，数据通过 dataTransfer 自然贯通。
2：用鼠标事件模拟拖拽（mousedown + mousemove + mouseup）
不依赖拖拽 API，完全用鼠标事件模拟「按下 → 移动 → 松开」：
- mousedown：记录起始位置，标记「开始拖拽」
- mousemove：根据位移更新被拖元素位置（或显示一个跟随鼠标的「幽灵」元素）
- mouseup：结束拖拽，根据最终坐标决定「放到哪里」
不依赖 dataTransfer ，只把「拖拽」当成一种 UI 行为；真正传数据走 postMessage ；用 mousemove （配合碰撞检测）判断鼠标是否进入/离开 iframe，从而在父页和 iframe 之间协调「当前在拖什么、放到哪」。拖拽结束时除 mouseup 外，还要用 keydown / keyup 处理释放（例如 Escape 取消），避免鼠标移出窗口后状态无法结束。
我应该用哪种方式呢？
如果你的父子页面不存在跨域问题，首选方式一。 因为dataTransfer 在设计上受同源策略约束：
- 同源 （同一协议 + 域名 + 端口）：父页面和 iframe 可以正常互相传递
dragstart→dragover→drop，getData能拿到对方setData的内容。 - 跨域 ：浏览器不会让 iframe 内的页面访问父页的
dataTransfer数据，drop时getData()往往是空的，无法可靠地做「从父页拖到 iframe」的数据传递。
因此，一旦 iframe 的 src 是跨域页面，就不能再依赖「拖拽 API + dataTransfer」来实现跨页面内容传递，必须换一种通道：用鼠标事件（mousemove）判断「何时进入/离开 iframe」+ 用 postMessage 在父页与 iframe 之间传数据。
下面重点讨论方式二的实现
好的，基于两个文件的实际代码逻辑，以下是重写后的内容：
实现步骤
整个跨 iframe 拖拽的核心是一套 双向 postMessage 通信协议。父页面和 iframe 各司其职，通过消息接力完成拖拽数据的传递。
父页面
父页面负责 拖拽状态管理 和 数据下发，需要处理四件事：
1 启动拖拽 ------ mousedown
在可拖拽元素上监听 mousedown，记录拖拽数据（draggingData），同时显示一个跟随鼠标的幽灵元素（Ghost）作为视觉反馈：
javascript
dragSource.addEventListener('mousedown', function (e) {
if (e.button !== 0) return;
e.preventDefault();
draggingData = { payload: '来自父页面的拖拽内容' };
dragGhost.style.display = 'block';
dragGhost.style.left = e.clientX + 'px';
dragGhost.style.top = e.clientY + 'px';
});2 跟随鼠标 ------ mousemove
在 document 上监听 mousemove，实时更新幽灵元素的位置。注意：当鼠标移入 iframe 区域后，父页面将 不再 收到 mousemove 事件（被 iframe 吞掉了），这正是需要子页面配合的原因。
javascript
document.addEventListener('mousemove', function (e) {
if (!draggingData) return;
dragGhost.style.left = e.clientX + 'px';
dragGhost.style.top = e.clientY + 'px';
});3 结束拖拽 ------ mouseup + keydown（Escape）
松开鼠标或按下 Escape 时，向 iframe 发送 dragEnd 消息，通知子页面清除高亮状态，然后清理自身状态、隐藏幽灵元素：
javascript
// 松开鼠标
document.addEventListener('mouseup', function (e) {
if (e.button !== 0 || !draggingData) return;
iframe.contentWindow.postMessage({ type: 'dragEnd' }, TARGET_ORIGIN);
draggingData = null;
dragGhost.style.display = 'none';
});
// Escape 取消
document.addEventListener('keydown', function (e) {
if (e.key !== 'Escape' || !draggingData) return;
iframe.contentWindow.postMessage({ type: 'dragEnd' }, TARGET_ORIGIN);
draggingData = null;
dragGhost.style.display = 'none';
});4 响应子页面上报 ------ message
这是最关键的一环。父页面监听来自 iframe 的消息，处理两种类型：
mousemove：子页面告诉父页面「鼠标已经进入我这边了」，父页面收到后立即把拖拽数据通过postMessage发送给子页面。dropped：子页面告诉父页面「用户已经松手，放置完成」，父页面据此清理自身状态。
javascript
window.addEventListener('message', function (e) {
if (e.origin !== location.origin && e.origin !== 'null') return;
// 子页面上报 mousemove → 父页面下发拖拽数据
if (e.data.type === 'mousemove' && draggingData) {
iframe.contentWindow.postMessage(
{ type: 'dragData', payload: draggingData.payload },
TARGET_ORIGIN
);
}
// 子页面上报 dropped → 清理状态
if (e.data.type === 'dropped') {
draggingData = null;
dragGhost.style.display = 'none';
}
});iframe子页面
子页面负责 感知鼠标进入 、接收拖拽数据 和 完成放置，同样需要处理三件事：
1. 上报鼠标移动 ------ mousemove（带节流）
子页面在 document 上监听 mousemove，通过 window.parent.postMessage 向父页面上报「鼠标进入了我这边」。为了避免消息过于频繁，使用 80ms 的节流：
javascript
let mousemoveTimer = 0;
document.addEventListener('mousemove', function () {
if (mousemoveTimer) return;
mousemoveTimer = setTimeout(function () {
mousemoveTimer = 0;
window.parent.postMessage({ type: 'mousemove' }, parentOrigin);
}, 80);
});2. 接收父页面消息 ------ message
监听 message 事件，校验 event.origin 后处理两种消息：
dragData：缓存拖拽数据，同时高亮放置区域，给用户「可以放下」的视觉提示。dragEnd：父页面通知拖拽结束（松手或取消），移除高亮、清除缓存。
javascript
window.addEventListener('message', function (e) {
if (e.origin !== location.origin && e.origin !== 'null') return;
if (e.data.type === 'dragData') {
cachedDragData = e.data.payload;
dropTarget.classList.add('highlight'); // 高亮放置区
}
if (e.data.type === 'dragEnd') {
dropTarget.classList.remove('highlight'); // 取消高亮
cachedDragData = null;
}
});3. 完成放置 ------ mouseup
在放置区监听 mouseup，如果当前有缓存的拖拽数据，说明这是一次有效放置。更新 UI 展示接收到的内容，并向父页面发送 dropped 消息：
javascript
dropTarget.addEventListener('mouseup', function (e) {
if (e.button !== 0 || !cachedDragData) return;
dropTarget.textContent = '成功接收：' + cachedDragData;
dropTarget.classList.remove('highlight');
window.parent.postMessage({ type: 'dropped' }, parentOrigin);
cachedDragData = null;
});4.3 消息流转全景
把上面的步骤串起来，一次完整的跨 iframe 拖拽经历了这样的消息链路：
到这里，你已经看到了完整的实现思路------父子页面通过 四种消息类型 （mousemove、dragData、dragEnd、dropped）构成了一个闭环的通信协议，各自只关心自己该做的事。逻辑清晰，职责分明。我们来实际跑一下看看效果。
你会发现，拖拽的元素停留在 iframe 容器的边界上，无法跟随。这是为什么？我们来分析一下。
如何处理iframe的边界问题
分析：拖拽时的跟随元素是怎么来的
一般来讲，上面跟随的元素我们称为幽灵元素，一般会透明度降低展示。比较简单的方式是给dom元素添加draggable属性。当你开始拖拽的时候便会有幽灵元素跟随，这个方式中你无需关心它的xy坐标，浏览器会自动处理。若是采用手动绘制UI，则需要你自行更新它的xy坐标。 但无论选择哪种，实际上都依赖于浏览器的事件处理机制。这个机制来源于浏览器的事件冒泡。
然而事件冒泡只在同一个 document 内有效。父页面和 iframe 是个独立的 document，当鼠标从父页移入 iframe 后，后续的 mousemove 只会发给 iframe 的 document，父页收不到，自然也就无法再更新父页上的幽灵位置。所以：
- 鼠标在父页面上：父页的 document 收到 mousemove，幽灵可以跟着动。
- 鼠标进入 iframe 后：mousemove 只发给 iframe 的 document，父页收不到，幽灵就定格在 iframe 边界上。
结论：需要把子容器的事件「冒泡」给父页面
既然事件不会跨 document 冒泡，要让父页继续感知鼠标在 iframe 里的移动，就只能我们自己把 iframe 里收到的事件「冒泡」上去 ：在 iframe 内监听 mousemove、mouseup 等，把坐标、事件类型通过 postMessage 发给父页，父页收到后当作「从子层冒泡上来的事件」去更新幽灵或完成放置。
实现
整体思路是在 iframe 内部建立一套「事件采集 + 上报」机制，把原本只在子文档里流转的鼠标、键盘、滚轮事件（如果需要缩放）通过 postMessage 传给父页，再由父页做坐标换算后在 iframe 元素上重新派发，这样父页的拖拽监听器就能持续收到事件，幽灵元素也就能跨边界跟随了。
第一步，让子容器报告丢失的事件
iframe 内需要监听所有可能影响拖拽的事件类型：mousemove、mouseup、keydown、keyup、keypress、wheel。收到事件后，我们只做两件事：组装 payload + postMessage 上报，不做任何坐标换算（因为此时还不知道 iframe 在父页中的位置和缩放比例）。
javascript
const windowEventTypes = [
'mousemove',
'mouseup',
'keydown',
'keyup',
'keypress',
'wheel'
];
// 创建iframe事件监听器，收集事件并通过postMessage上报给父页面
function createIframeListen() {
// 存储已绑定的事件监听器，用于后续移除
const listeners = [];
// 构造事件数据并发送给父页面
const createAndDispatchEvent = (events, type) => {
let payload;
if (type.startsWith('mouse')) {
payload = {
bubbles: true,
cancelable: false,
clientX: events.clientX,
clientY: events.clientY,
button: type === 'mouseup' ? 0 : undefined
};
} else if (type === 'wheel') {
payload = {
bubbles: true,
cancelable: false,
clientX: events.clientX,
clientY: events.clientY,
deltaX: events.deltaX,
deltaY: events.deltaY,
deltaZ: events.deltaZ,
ctrlKey: events.ctrlKey,
shiftKey: events.shiftKey
};
} else {
payload = {
bubbles: true,
cancelable: false,
key: events.key,
code: events.code,
keyCode: events.keyCode, // 虽已废弃但仍广泛使用
charCode: events.charCode, // 虽已废弃但仍广泛使用
which: events.which, // 虽已废弃但仍广泛使用
shiftKey: events.shiftKey || false,
ctrlKey: events.ctrlKey || false,
altKey: events.altKey || false,
metaKey: events.metaKey || false
};
}
events.preventDefault();
// 向父页面发送事件数据（注意：生产环境建议替换*为具体域名，提升安全性）
window.parent.postMessage({
action: 'dispatchEvent',
eventData: {
type,
payload
}
}, '*');
};
// 为每个事件类型绑定监听器
windowEventTypes.forEach(type => {
const listen = (evt) => createAndDispatchEvent(evt, type);
window.addEventListener(type, listen, {
passive: false
});
listeners.push([type, listen]);
});
// 返回移除所有事件监听器的方法
return {
removeAllEvent() {
listeners.forEach(([type, listen]) => {
window.removeEventListener(type, listen);
});
}
};
}这段代码的核心在于 createAndDispatchEvent：根据事件类型提取必要的属性（鼠标类取 clientX/clientY，键盘类取 key/code），组装成 payload 后通过 postMessage 发送 { action: 'dispatchEvent', eventData: { type, payload } }。注意这里的 clientX/clientY 是 iframe 自己坐标系里的值，换算留给父页去做。
第二步，父页面接受事件并手动派发
父页监听 message 事件，筛选出 action === 'dispatchEvent' 的消息，然后做三件事：构造原生事件对象 → 坐标换算（含缩放）→ 在 iframe 元素上派发。
javascript
/**
* 自动将iframe内上报的事件转发到父页面的iframe元素上
* @param {Object} iframeRef - 包含iframe DOM元素的Ref对象}
* @param {Object} offset - 包含iframe偏移和缩放的对象 } }
* @returns {Object} 包含移除事件监听的方法
*/
function useIframeEventAutoBubble(iframeRef, offset) {
// 处理message事件，转发iframe内的事件到父页面的iframe元素
const messageHandler = (event) => {
// 只处理指定action的消息
if (event.data?.action !== 'dispatchEvent') return;
const { eventData } = event.data;
let evt;
// 根据事件类型创建对应原生事件，并换算坐标
switch (eventData.type) {
case 'mousemove':
case 'mouseup':
case 'mouse':
// 换算iframe内坐标到父页面坐标系（适配缩放和偏移）
eventData.payload.clientX = eventData.payload.clientX * offset.value.zoom + offset.value.left;
eventData.payload.clientY = eventData.payload.clientY * offset.value.zoom + offset.value.top;
evt = new MouseEvent(eventData.type, eventData.payload);
break;
case 'wheel':
eventData.payload.clientX = eventData.payload.clientX * offset.value.zoom + offset.value.left;
eventData.payload.clientY = eventData.payload.clientY * offset.value.zoom + offset.value.top;
evt = new WheelEvent(eventData.type, eventData.payload);
break;
case 'keyup':
case 'keydown':
case 'keypress':
evt = new KeyboardEvent(eventData.type, eventData.payload);
break;
}
// 若创建了事件，在iframe元素上派发（让父页面能监听到）
if (evt && iframeRef.value) {
iframeRef.value.dispatchEvent(evt);
}
};
// 绑定事件监听（替代Vue的onMounted）
window.addEventListener('message', messageHandler);
// 返回移除监听的方法
return {
removeEventListener: () => {
window.removeEventListener('message', messageHandler);
}
};
}这里最关键的是坐标换算 ，因为需要模拟真实的事件冒泡必须要基于当前子容器在父页面中的位置换算 + 鼠标在子容器的位移信息。完成后，用 new MouseEvent / new WheelEvent / new KeyboardEvent 构造出原生事件对象，再在 iframe 元素本身 上 dispatchEvent。这样一来，父页里监听在 document 或容器上的拖拽逻辑（比如 document.addEventListener('mousemove', ...)）会收到这个事件，就像鼠标真的在 iframe 边界上移动一样，幽灵元素自然能继续跟随。
以上代码为Vue实现，可与拖拽实现分开使用，使用时注意子容器的初始位置的参数即可
总结
跨页面（跨 iframe）拖拽的核心在于两件事：
- 数据通道 ：同源时可以用 HTML5 拖拽 API 的
dataTransfer；跨域时必须用 postMessage 在父页与 iframe 之间传「拖拽内容」和状态，拖拽只负责交互，数据由消息通道负责。 - 事件边界 ：事件冒泡不跨 document。鼠标进入 iframe 后，父页收不到 iframe 内的 mousemove/mouseup，所以需要子页采集事件 → postMessage 上报 → 父页坐标换算后在 iframe 元素上派发，让父页的拖拽逻辑持续收到事件，幽灵才能跨边界跟随。
把数据通道和事件边界这两件事理清，无论哪种方式，iframe 容器就可以像操作同一文档里的 DOM 一样，实现完整的跨页拖拽体验。
最后，我们来看一个完整的复杂应用场景：
可点击这里「案例」查看
注意 ： 案例是只读状态无法添加组件，欢迎访问RollCode官网注册体验