背景
最近钻研拖拽生成页面，遇到一个跨iframe拖拽的性能的问题。在此记录下心得。
页面外面的 iframe 在没有跨域的状况下，SortableJS 是反对跨iframe拖拽的，官网仓库给了例子。如果跨域了，咱们拿不到 iframe 的 contentDocument，无奈监听事件，所以 Sortable 默认状况下是不能工作的。
思路 - 模仿拖拽
实践上 Sortable 是通过监听事件来实现拖拽的性能，咱们手动结构 drag 事件，告诉 Sortable，也是能够实现工作的。
实际 - 模仿拖拽
拖拽须要解决三个事件节点
- dragstart
- dragover
- dragend
dragstart
Sortable 一开始不会在 dom 节点加上 draggable 属性，必须点击了才会，所以模仿时，须要先触发一个 pointdown 事件，而后触发 dargstrat 事件
var downEvent = new PointerEvent("pointerdown", { // pointerId: 1, bubbles: true, cancelable: true, // pointerType: "touch", width: 100, height: 100, isPrimary: true,});var startE = new DragEvent("dragstart", { bubbles: true });dragover
父页面的 dragover 事件不会传递到 iframe 内（废话），所以咱们只能在 iframe 内监听 mousemove 事件， 而后结构一个 dragover 事件，传递给dom，通知 Sortable 咱们拖动了Sortable元素到该dom下面，看看是不是须要扭转地位。
document.addEventListener("mousemove", (e) => { console.log(e.type); if (e.target.classList.contains("list-group-item")) { e.target.dispatchEvent( new DragEvent("dragover", { clientY: e.clientY, bubbles: true }) ); // 用mousemove代替 }})dragend
触发被拖拽 dom 的 dragend 事件即可
dragEl.dispatchEvent(new DragEvent("dragend"));父子页面通信
在页面中模仿拖拽胜利后，接下来就是离开成两个页面，通过 postMessage 通信
暗藏的 Sortable 实例
这里把暗藏的 Sortable 实例称作影子节点， 在父页面开始拖拽某个 dom 时，iframe 外部须要同时触发一个 pull mode 的拖拽开始事件，并且将父页面拖拽的 dom 的 innerHTML 写入到影子节点
demo 代码
https://github.com/larry011/s...