css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题
写在最前
针对于在vue中实现拖拽改变两左右个div大小的方式，请查看上一篇文章《vue中实现拖动调整左右两侧div的宽度》。此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题，比如这样，右侧div中使用了一个iframe组件，导致实际操作中出现两个问题，一个是拖不动，另外一个是无法根据鼠标移动，快速响应，甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题。如果去除右侧iframe框架，则没有问题。
有iframe情况
无iframe情况
问题原因&解决思路
问题原因我不知道，不过这个博客给了我解决思路《解决jqueryUI的拖拽,如果元素中含有iframe,拖动卡的问题》，还有以下说法，他们的解决思路一样的。因此我猜想是鼠标的监听造成的影响，在我们拖拽的时候，因为拖拽过快，很容易出现鼠标移动超过拖拽范围的情况，此时的鼠标可能已经在iframe上方，从而会同时加载iframe中的内容，导致出现卡顿。
总之，解决的思路就是在拖动的时候，在iframe上方添加一个透明的遮罩层，然后在停止拖拽的时候让其消失。这样问题就可以完美解决了。
解决方式共有两节，一节包含我解决过程中遇到的问题，一节是直接的解决方式，如果想直接查看解决方式的，请直接跳转至 解决方式 那一节
解决方式(含解决过程中遇到的问题)
HTML组件部分源代码
这是实现拖拽的组件代码，如果不了解我原本使用的实现方式，请参考《vue中实现拖动调整左右两侧div的宽度》
css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题相关推荐
- 黑苹果音频卡顿_手机耗电大、卡顿怎么办？只需关掉这个按键轻松解决，去试试...
阅读本文前,请您先点击上面的"议科技",关注,这样您就可以继续收到最新文章了.每天都有分享.完全是免费订阅,请放心关注. 大家好,很高兴认识大家,话不多说,进入正题,手机现在已经是 ...
- kodi android 卡顿,给Kodi设置缓存来解决播放大文件卡顿
给Kodi设置缓存来解决播放大文件卡顿 2021-03-02 16:21:20 28点赞 355收藏 31评论 Kodi可以算是电视盒子上最棒的播放器了,它具有强大的功能,优美的界面,相信很多人也都是 ...
- 解决当考生点击开始考试的时候出现卡顿问题
现象:210多人考生同时参加考试,出现卡顿现象.并且部分考生进行考试过程中出现获取试题卡顿现象. 分析问题: 主要进行应用程序分析.是因为当考生点击开始考试的时候,会把本次考试的答题结构插入到表中.假 ...
- 高德地图marker标点数据量太大造成卡顿的解决方案
marker标点卡顿问题 问题说明 应用高德地图使用marker标点时,由于数据量大(>1000)就会造成页面卡顿,好几秒才能加载完成,并且页面也会卡顿 解决方案 使用官方提供的海量点MassM ...
- 解决小新13pro2020连接4k60hz显示器后，出现卡顿，查看刷新率只有30hz的问题
问题描述: 我买了一台4k60hz的屏幕,手上的笔记本为轻薄本小新13pro2020 独显MX350版本,笔记本连上屏幕后,发现鼠标移动有拖影,打开和浏览网页出现卡顿情况. 分析与解决方案(简洁版): ...
- Win11的两个实用技巧系列之解决dns异常的三种方法、win10/win11卡顿的三种解决办法
电脑dns异常怎么修复win10? Win10解决dns异常的三种方法 电脑dns异常怎么修复win10?最近有很多win10用户遇到dns配置错误的问题,这让用户非常苦恼,下面我们就来看看Win10 ...
- 解决数据量大造成卡顿 ---- 事件委托
项目开发过程中有些场景 比如活动页 数据量较大 一部分用户手机可能会造成卡顿. 比如产品多 每个产品都有点击事件 去详情啊,加购啊等等 一个产品两个事件,100个产品就200个事件了占用内存较大.可以 ...
- 华为 java sd卡,手机添加存储卡 内存变大不卡顿——华为SD卡扩容实例
手机的基本功能是接听电话收发短信,电脑是人工智能机器人,二者合并便是智能手机,也就是今天所说的"手机". 手机用于记忆和工作的"脑海"里拥挤不堪时便会卡顿频发, ...
- 安卓手机反应慢又卡怎么办_手机卡顿反应慢怎么办？学会这几招手机永远不会卡顿！...
小伙伴们有没有遇到过这样的场景? 场景一:玩农药时,自己一丝血,闪现+神走位,躲草丛卡视野,眼瞅着就要逃之夭夭了,关键时候460,结果你懂的. 场景二:明明来了个电话,按接听键,猛戳屏幕愣是接不了. ...
最新文章
- 面试官：哥们，你们的系统架构中为什么要引入消息中间件？
- [TJOI2013]最长上升子序列
- PyTorch 多分类损失函数
- LinkedHashMap的使用
- 前端渲染与后端渲染之间的区别？
- Java连载1-概述常用的dos命令
- eclipse html页面校验,当我在Eclipse浏览器中运行url时，HTML表单未通过验证
- npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@
- 论文列表——text classification
- 组件与.NET互操作
- 我的家乡介绍网站设计与实现
- HCIE Secuirty URPF技术 备考笔记（幕布）
- BSB网络验证 易语言网络验证系统 autojs 网络验证系统 免费的卡密收费系统 账号注册系统
- es---elasticsearch-篇二：idea操作es，常用查询DSL
- win10升级补丁_干掉烦人的win10升级助手gwx
- 520情人节礼物可以送什么？最实用的礼物推荐
- 热门股权转让项目：临沂泰森置业发展有限公司70%股权转让
- 苹果A16的遮羞布被撕下了，性能提升幅度有限，被嘲讽为挤牙膏
- MySQL 第六章
- [scala基础]--Option/Some/None