拖拽场景遇到 iframe 无法拖拽的问题解决方案

描述一个场景：在网页中，分为上下两部分布局，下半部分显示操作日志，下半部分的区域高度是可拖拽调整的，但是如果下半部分嵌入一个 iframe 的时候，往上拖拽可以，但是往下拖拽，一旦到了 iframe 的上面，拖拽就失效了，怎么解决呢？

解决思路就是在拖拽开始的时候，给 iframe 设置一个属性：pointerEvents = 'none' ，禁用 iframe 上的鼠标行为，拖拽结束后再恢复。

首先给涉及到拖拽失效的 iframe 添加一个类名 .need-disable-pointer-iframe ，方便获取到对应的 iframe 节点。

然后在拖拽开始和结束的时候执行方法。

const line = document.querySelect('.drag-line') // 被拖拽的标识

if(line){
    line.ondrag = () => {
        setIframePointerEvents('none')
    }
    line.ondragend = (e) => {
        setIframePointerEvents('auto')
        // ... 其他逻辑
    }
}

function setIframePointerEvents(val: string) {
    const iframes = document.querySelectAll('.need-disable-pointer-iframe')
    if(iframes?.length) {
        iframes.forEach(iframe => {
            iframe.style.pointerEvents = val
        })
    }
}