html5原生拖拽api不支持跨iframe，需父页面统一接管：监听drag事件、计算iframe坐标、用postmessage通信，iframe需注册区域、暴露handledrop方法并做坐标转换与安全校验。
iframe 本身不支持原生 drag 排序
iframe 是独立的浏览上下文，draggable="true" 在 iframe 内部生效，但无法跨 iframe 边界触发拖拽事件链——dragstart 出不来，dragover 不冒泡，drop 更不会被父页面捕获。这不是 bug，是浏览器安全沙箱强制隔离的结果。你看到的“iframe 内能拖”，只是它自己内部的 DOM 重排；一旦想把一个 iframe 里的列表项拖进另一个 iframe 或父页面容器，原生 API 直接失效。
跨 iframe 拖拽排序必须由父页面统一接管
核心思路是：父页面监听所有可拖元素（包括 iframe 内的），用 postMessage 建立双向通信，把拖拽状态、目标位置、数据 ID 等在父子间同步。不能依赖 dataTransfer，它跨 iframe 时被清空或拒绝。
- iframe 内每个可拖项需加
data-drag-id并监听mousedown（不是dragstart）作为拖拽起点 - 父页面用
window.addEventListener('message', ...)接收 iframe 发来的拖拽开始/移动/结束消息 - 拖拽中，父页面动态创建视觉占位符（如带虚线边框的
<div class="drop-placeholder">），并用 <code>getBoundingClientRect()计算插入点 - drop 触发后，父页面通过
iframe.contentWindow.postMessage({type: 'move-item', from: 'A', to: 'B', id: '123'}, '*')通知对应 iframe 更新自身数据源 - iframe 收到消息后，用
Array.splice()重排本地数组，并触发视图更新（如 Vue 的ref.value或 React 的setState） - 在拖拽开始（
mousedown或dragstart）时，给所有相关 iframe 设置iframe.style.pointerEvents = 'none' - 拖拽结束（
mouseup或drop）后立刻恢复pointerEvents = 'auto' - 别只靠 class 控制，style 属性更可靠；若 iframe 有
sandbox属性，确保没禁用allow-scripts，否则postMessage也会失败 - 注意 Safari 对
pointerEvents: none在 iframe 上的支持较晚，iOS 16.4+ 才稳定，旧版本需降级为禁用拖拽提示 - 检测
/(iPad|iPhone|iPod)/.test(navigator.userAgent)，成立则直接跳过拖拽初始化 - 改用点击交互：每项右侧固定 ↑↓ 按钮，点击后调用
postMessage请求 iframe 移动当前项 - 或长按弹出位置选择浮层（含数字索引），选中后发送移动指令
- 不要尝试用
touchmove + transform在 iframe 内模拟——滚动冲突和 touchcancel 频发，用户松手后常卡在半空
iframe 覆盖区域导致拖拽中断怎么办
常见现象：拖拽元素经过 iframe 上方时，光标变箭头、dragover 停止触发、直接 drop 失败。这是因为 iframe 拦截了鼠标事件，父页面收不到坐标流。
移动端 iOS 上 iframe 拖拽几乎不可行
iOS Safari 对 iframe + 拖拽的组合有双重限制：一是全局禁用 draggable，二是 pointerEvents: none 在 iframe 上无效。这意味着你在 iPhone 上根本没法靠原生方案实现跨 iframe 排序。
load 事件前就尝试绑定 postMessage 监听，或在 iframe 还未挂载好 data-drag-id 元素时就开始拖拽，整个流程会静默失败。务必等 iframe.contentDocument?.readyState === 'complete' 后再初始化通信通道。
