拖拽场景遇到 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
        })
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/171846.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【AICFD案例教程】IGBT对流换热分析

AICFD是由天洑软件自主研发的通用智能热流体仿真软件,用于高效解决能源动力、船舶海洋、电子设备和车辆运载等领域复杂的流动和传热问题。软件涵盖了从建模、仿真到结果处理完整仿真分析流程,帮助工业企业建立设计、仿真和优化相结合的一体化流程&#x…

技术分享| anyRTC之RTN网络

RTN(Real-time Network)中文名:实时音视频传输网络。 RTN是最近几年由各大RTC的云厂商提出的一个全新架构的音视频实时传输网络概念。类似于直播的CDN网络,RTN是对音视频的实时性又强烈要求的场景而设计的,原理上全球端到端的时延通过RTN网络…

springboot集成nacos作配置中心,动态配置不生效

总体概要 springboot3.0,nacos,jdk17使用nacos配置中心,热更新,使配置动态生效 本文主要介绍springboot怎么集成nacos作为配置中心,使其配置在不重启服务的情况下,怎么生效的。 所用组件及其版本 组件版本…

GNSS技术在农业领域的创新应用

全球导航卫星系统(GNSS)技术在农业领域的广泛应用为现代农业带来了革命性的变革。从精准农业到农业机械自动化,GNSS技术为提高农业生产效率、减少资源浪费、实现可持续发展提供了关键支持。本文将深入探讨GNSS技术在农业领域的应用&#xff0…

数据结构~~~~ [队列] ~~~~

文章目录 队列队列的概念与结构队列的接口实现***队列的初始化******队列的销毁******队列的插入与创建节点******队列的删除******队列的队头数据******队列的队尾数据******队列的判空*** 队列 队列的概念与结构 队列的插入数据在队尾出数据在队头(尾入头出&…

影视行业如何远程完整快速传输大文件?

影视行业是一个充满创意和协作的领域。在影视制作中,涉及到多个环节和部门,包括编剧、导演、摄影、剪辑、配音、视效等。这些环节和部门通常分布在不同的地点,甚至不同的国家。因此,影视制作过程中需要频繁进行远程传输&#xff0…

第1关:图的邻接表存储及求邻接点操作

任务要求参考答案评论2 任务描述相关知识编程要求测试说明 任务描述 本关任务:要求从文件输入顶点和边数据,包括顶点信息、边、权值等,编写程序实现以下功能。 1)构造图G的邻接表和顶点集,即图的存储结构为邻接表。 …

VCP-DCV VMware vSphere,即将开课~想了解点击查看

VCP-DCV VMware vSphere 本周开课~ 想报名的必须提前预约啦 👇👇👇 课程介绍 本课程重点讲授如何安装、配置和管理VMware vSphere 8.0(包括VMware ESXi™ 8.0和VMware vCenter Server™ 8.0) 本课程将帮助您做好…

docker打包chatpdf(自写)

docker打包上传 docker build -t kitelff/chatpdf:v0.1 .##修改镜像名字 docker tag c2c1a0eb4e08 kitelff/chatpdf:v0.1## push docker push kitelff/chatpdf:v0.1上传文件,测试效果

Rust语言精讲:数据类型全解析

大家好!我是lincyang。 今天,我们将深入探讨Rust语言中的数据类型,这是理解和掌握Rust的基础。 Rust语言数据类型概览 Rust是静态类型语言,所有变量类型在编译时确定。Rust的数据类型分为两类:标量类型和复合类型。…

GNSS技术在建筑和城市规划中的关键角色

全球导航卫星系统(GNSS)技术在当今建筑和城市规划领域扮演着至关重要的角色。这一先进的技术为城市的可持续发展、建筑工程的精准施工以及城市规划的科学决策提供了强大的支持。本文将深入探讨GNSS在建筑和城市规划中的关键角色,并分析其对这…

ML-Net:通过深度学习彻底改变多标签分类

一、说明 多标签分类是一项具有挑战性的机器学习任务,其中输入可以同时属于多个类。传统的多标签分类方法通常依赖于将问题转化为一系列二元分类任务或使用集成方法。然而,深度学习的出现开创了多标签分类的新时代,ML-Net 等模型突破了该领域…

【ARM AMBA AXI 入门 15 -- AXI-Lite 详细介绍】

请阅读【ARM AMBA AXI 总线 文章专栏导读】 文章目录 AXI LiteAXI-Full 介绍AXI Stream 介绍AXI Lite 介绍AXI Full 与 AIX Lite 差异总结AXI Lite AMBA AXI4 规范中包含三种不同的协议接口,分别是: AXI4-FullAXI4-LiteAXI4-Stream 上图中的 AXI FULL 和 AIX-Lite 我们都把…

Vscode GDB 查看内存的值

在VSCode的GDB图形界面中,你可以使用"调试控制台(Debug Console)"来查看malloc返回的地址里的值。以下是具体的步骤: 首先,你需要在你的代码中设置一个断点,这个断点应该在malloc函数调用之后,这样你可以获…

企业降低成本方法有哪些?

企业的经营管理离开不两件事:提升营业额,降低成本。企业的发展壮大,离不开销售,按理说,营业额越高,企业的发展就越大;事实上,除了销售好,营业额高,还需重视一…

共谋发展,共赢未来 | 江西航天红源农业科技总经理孟凡明一行莅临拓世科技集团考察参观

在时刻充满着变化与机遇的商业世界里,农业的颠覆与重构已成为产业新风口,在日新月异的当下,农业与乡村正被开辟成为推动产业结构升级的新战场。 2023年11月20日江西航天红源农业科技有限公司总经理孟凡明一行抵达拓世科技集团南昌总部进行考…

OpenLDAP配置web管理界面PhpLDAPAdmin服务-centos9stream

之前已经发了一篇关于centos9下面配置openldap多主高可用集群的内容,不会配置ldap集群的请参考:服务器集群配置LDAP统一认证高可用集群(配置tsl安全链接)-centos9stream-openldap2.6.2-CSDN博客 这里跟着前篇文章详细说明如何配置…

Vue3入门(与Vue2进行对比)

1. Vue2 选项式 API vs Vue3 组合式API 特点: 代码量变少分散式维护变成集中式维护 2. Vue3的优势 使用create-vue搭建Vue3项目 1. 认识create-vue create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链)&…

哈希表HashTable

散列表(Hash table,也叫哈希表),是根据键(Key)而直接访问在内存存储位置的数据结构。 哈希表中关键码就是数组的索引下标,然后通过下标直接访问数组中的元素,复杂度O(1) 哈希表本质…

Virtual DOM

Virtual DOM Virtual DOM 产生的原因 Virtual DOM 产生的原因是因为浏览器中的 DOM 是很庞大复杂的,浏览器的标准就是把 DOM 设计的非常复杂,因此频繁操作 DOM 会有性能问题。 Virtual DOM Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点…