前言

不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggable进行了处理——添加了iframeFix属性设置(iframe:true时候就可以解决),但是却没有为resizable添加这个属性(实在费解,这个为毛啊)。

问题

jQuery UI resizble的div包含iframe导致缩放的不平滑解决(通过helper可观察到缩放非常不平滑)

测试代码

HTML:

<div id="draggable">
<iframe src="http://www.baidu.com"></iframe>
</div>

CSS:

#draggable { width: 800px; height: 500px; }
iframe{ width: 100%; height: 100%;}
.widget_resizable_helper{
border:3px solid #A29B9B;
z-index:999999 !important;
}

JS:

$("#draggable").resizable( { helper: "widget_resizable_helper"});

解决思路

思路一:用在开始进行缩放(触发了resizable的start事件)为iframe添加z-index属性,将iframe放置在最下层。

$("#draggable").resizable({
helper: "widget_resizable_helper",
start: function( event, ui ) {
$("#draggable").css({position:"relative","z-index":-1});
$("iframe").css({position:"relative","z-index":-2});
},
  stop:function(){
     $("#draggable").css({position:"absolute","z-index":1000});//尘归尘,土归土,设回正常状态下的属性
     $("iframe").css({"z-index":1001});
  }
});

这个做法在chrome和firefox有效,但在IE下无效(缩放拉到iframe里面还是会一卡一卡的,蛋疼啊)。

问题原因:细心的人估计发现了,其实设置z-index是有效的,但为什么效果像是z-index无用呢。凶手就是——IE穿透了

具体原因就是—— IE中如果两个div有层叠关系,上层的div没有内容和背景图片,当鼠标在两个div重叠部分的时候,会触发下层div的mouseover事件(IE),从而触发上层div的mouseleave事件,也就是说,上层的div被穿透了。

所以示例在IE上就出现:有些元素被遮挡了(z-index起效了),但a标签因IE穿透可以被触发事件,所以在resizing的时候就会因为iframe里面的a标签被触发而一卡一卡的。

结果:这种解决思路不大行,果断放弃。

思路二:在我灵机一动下,突然意识到draggable已经解决了iframe影响的问题,那我能不能借鉴draggable里的iframefix。

$("#draggable").resizable({
helper: "widget_resizable_helper",
start: function( event, ui ) {
$("iframe").each(function() {
   $("<div class='ui-resizable-iframeFix' style='background: #fff;'></div>")
.css({
width: this.offsetWidth+"px", height: this.offsetHeight+"px",
position: "absolute", opacity: "0.001", zIndex: 1000
})
.css($(this).offset())
.appendTo("body");
});
},
stop:function(){
$("div.ui-resizable-iframeFix").each(function() {
this.parentNode.removeChild(this);
});
}
});

结果:神奇的解决了,chrome、firefox、IE等,竟然都非常平滑,果然它山之石可以攻玉。

解决思路就不在这里班门弄斧了,大家看看也就明白了。

还存在问题——draggable

在上面我说过,jQuery UI 对draggable的iframefix下面这种解决思路。

$("iframe").each(function() {
  $("<div class='ui-draggable-iframeFix' style='background: #fff;'></div>")
.css({
width: this.offsetWidth+"px", height: this.offsetHeight+"px",
position: "absolute", opacity: "0.001", zIndex: 1000
})
.css($(this).offset())
.appendTo("body");
});

这对draggable有很大问题——拖动还是会卡的,而且非常明显。

原因就是  .css($(this).offset()) 和 width: this.offsetWidth+"px", height: this.offsetHeight+"px"这个设置,遮挡层大小和位置就仅仅是原先iframe的大小和位置。如果鼠标边拖动iframe边离开遮挡层,会有很明显一卡一卡的情况,因为遮挡层外没有遮挡,iframefix这东西就废啦!!!!!

哈哈哈,是不是觉得坑叻。

不过还是有几个解决方法:

思路一:使用helper,当helper移到指定位置再设置iframe的位置。

$widgetObj.draggable({
helper:function(){
return '<div style="width:'+w+'px;height:'+h+'px;z-index:'+1001+';background:black;opacity:0.4;"></div>';
},
iframeFix: true,
stop:function(event,ui){
$widgetObj.css({'top':ui.position.top,'left':ui.position.left});
}
}) ;

思路二:不使用iframeFix。自己设置遮挡层,将遮挡层大小设为body的长宽,位置设置为top:0;left:0,

$("#draggable").draggable({
start: function( event, ui ) {
$("iframe").each(function() {
$("<div class='ui-draggable-iframeFix' style='background: #fff;'></div>")
.css({
width: document.body.scrollWidth+"px", height: document.body.scrollHeight +"px",
position: "absolute", opacity: "0.001", zIndex: 1000,
top: 0,left: 0
})
.appendTo("body");
});
},
stop:function(){
$("div.ui-draggable-iframeFix").each(function() {
this.parentNode.removeChild(this);
});
}
});

两种思路我偏向第一种用法,效果比第二种好,第二种虽然不会卡,但是有像页面被全选的情况。

jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法的更多相关文章

  1. div拖拽到iframe上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法

    思路一:用在开始进行缩放(触发了resizable的start事件)为iframe添加z-index属性,将iframe放置在最下层. $("#draggable").resiza ...

  2. easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  3. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  4. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  5. 【NX二次开发】设置了“附加包含目录”,还是提示“无法打开包括文件”的解决方法

    项目属性中的"附加包含目录"路径完全正确,但是还是无法找到头文件: 这个问题我遇到过不止一次,纠结了很久,终于发现了解决方法: 改为: 问题解决! 分析原因:项目中的属性配置 与 ...

  6. 黄聪:jquery mobile通过a标签页面跳转后,样式丢失、js失效的解决方法

    问题描述: 用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 解决办法1: 将所有的css以及js全部放在div内. 原理: 由于jqm的ajax跳转的 ...

  7. AJ学IOS(36)UI之手势事件旋转_缩放_拖拽

    AJ分享,必须精品 效果 完成一个图片的捏合缩放,拖拽,旋转动作. 设计思路 拖拽: 首先是最简单的拖拽 //拖拽 -(void)panTest { UIPanGestureRecognizer *p ...

  8. jQuery UI API - 可拖拽小部件(Draggable Widget)(转)

    所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...

  9. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

随机推荐

  1. 通过 Storyboard 快速搭建一系列连贯性的视图控制器

    此例子只是一个简单的 Demo,这里没有过多介绍如何去实现,网上有很多关于 Storyboard 技术的介绍,请自行搜索. 效果如下: iPhone 5s   iPhone 6   iPhone 6 ...

  2. Reactor模式与Proactor模式

    该文章总结了网上资源对这两种模式的描述 原文地址:http://www.cnblogs.com/dawen/archive/2011/05/18/2050358.html 1.标准定义 两种I/O多路 ...

  3. Qt Creator 黑色主题配置

    可能是一个习惯了吧,我个人比较喜欢在黑色主题的环境下进行编程.黑色主题对眼睛稍微友好一点,看起来也不是那么low.这里给出QtCreator的黑色主题配置方案. 如果是最新的Creator3.3+的版 ...

  4. maven中文乱码问题——打包错误

    工程采用GBK编码, web应用中的配置文件打包后,war包里的配置文件里的中文成乱码.   用notepad++打开后,可以看到是用utf-8格式的(可以通过菜单中的[格式]查看),也就是说,在经过 ...

  5. 记一个dynamic的坑

    创建一个控制台程序和一个类库, 在控制台创建一个匿名对象,然后再在类库中访问它,代码如下: namespace ConsoleApplication1 { class Program { static ...

  6. 在eclipse中配置python插件

    最好离线下载python的离线包.名字叫——org.python.pydev.feature-1.6.3.2010100513 此包里面有两个文件夹 features 和 plugins,分别把2包中 ...

  7. Direct2D开发:绘制网格

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.引言 最近在使用Direct2D进行绘制工作中,需要实现使用Direct2D绘制网格的功能.在网上查了很多资料,终于实 ...

  8. SQL Server 2016里TempDb的提升

    几个星期前,SQL Server 2016的最新CTP版本已经发布了:CTP 2.4(目前已经是CTP 3.0).这个预览版相比以前的CTP包含了很多不同的提升.在这篇文章里我会谈下对于SQL Ser ...

  9. Vim杂记:markdown插件

    一.安装插件 从以下地址下载压缩包 github下载:https://github.com/plasticboy/vim-markdown plasticboy下载:http://plasticboy ...

  10. Ioc原理及常用框架

    1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑.  图1:软件系统中耦合的对象 如果我们 ...