关于iframe:sortablejs-支持-iframe-跨域拖拽

背景

最近钻研拖拽生成页面，遇到一个跨 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…