有做企业网站的吗,creative建网站平台,ui网页设计字体,苏州装饰公司描述一个场景#xff1a;在网页中#xff0c;分为上下两部分布局#xff0c;下半部分显示操作日志#xff0c;下半部分的区域高度是可拖拽调整的#xff0c;但是如果下半部分嵌入一个 iframe 的时候#xff0c;往上拖拽可以#xff0c;但是往下拖拽#xff0c;一旦到了…描述一个场景在网页中分为上下两部分布局下半部分显示操作日志下半部分的区域高度是可拖拽调整的但是如果下半部分嵌入一个 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})}
}
