描述一个场景:在网页中,分为上下两部分布局,下半部分显示操作日志,下半部分的区域高度是可拖拽调整的,但是如果下半部分嵌入一个 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
})
}
}