思路一:用在开始进行缩放(触发了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标签被触发而一卡一卡的。

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

思路一:使用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);
});
}
});

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

div拖拽到iframe上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法的更多相关文章

  1. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  2. 使用MethodSwizzle导致按home app进入后台或者app间切换发生crash的解决方法

    参考文章: 1.http://blog.csdn.net/alincexiaohao/article/details/45913857 2.http://www.cocoachina.com/ios/ ...

  3. odoo中pos模块由于删除partner导致发生(你试图访问的单据已经删除)错误的解决方法

    model.js文件中 push_order: function(order) { var self = this; if(order){ this.proxy.log('push_order',or ...

  4. 关于换了手机后,导致原来连的fiddler抓不到新手机上的包的解决方法

    原来我们测试都是一台安卓机,一台ios机,由于机子不够,所以安卓机都是自己的手机,可以连内网,也可以连外网 但是最近这几天,不知道公司抽了什么风.把网都给限制了,只有公司的测试机,才能连内网测,结果我 ...

  5. 因为曾经装过Mysql导致再次装时windows无法启动MySQL服务报错1067的解决方法

    找到这里 MySQL右击属性 检查这里的可执行文件的路径是否正确,因为我这里显示的是原先的文件夹所以会一直启动失败,修改一下 这里你去百度经验 windows服务修改可执行文件路径 网址https:/ ...

  6. Android 自定义ImageView支持缩放,拖拽,方便复用

    今天刚发了一篇关于ImageView的缩放和拖拽的博客,然后我想了下,将他自定义下,方便我们来复用这个imageView,效果我就不多说了,http://blog.csdn.net/xiaanming ...

  7. C#实现GDI+基本图的缩放、拖拽、移动

    C#实现GDI+基本图的缩放.拖拽.移动示例代码如下: using System;using System.Collections.Generic;using System.ComponentMode ...

  8. ie7下div覆盖在iframe上方,ie8就不行,怎么解决

    <div style="position:relative;display:inline-block;width:178px;height:90px;z-index:9999;top: ...

  9. 缩放系列(三):一个可以手势缩放、拖拽、旋转的layout

    弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...

随机推荐

  1. 使用Postman对HTTP接口进行功能测试

    一.工具说明 Postman是一种网页调试与发送网页http请求的工具.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 二.应用场景 1.Get请求 get请求通过接口参数拼 ...

  2. Workflow License invalid!!

    2019/08/23-17:02:16 >> INFO >> main >> org.hibernate.cfg.HbmBinder.bindRootPersist ...

  3. 那些堪称神器的 Chrome 插件

    Chrome 的简洁快速以及丰富的插件种类使得它在国内日益盛行,帮助了我们很多 Chrome 用户提升了工作效率,而今天要给大家推荐8款实用甚至堪称神器的 Chrome 插件,希望对提升大家的工作效率 ...

  4. springboot项目中使用maven resources

    maven resource 组件可以把pom的变量替换到相关的resouces目录中的资源文件变量 示例项目:内容中心 (文章管理)  生成jar包,生成docker ,生成k8s文件 1.项目结构 ...

  5. [Git] 019 merge 命令的补充

    回顾:[Git] 017 加一条分支,享双倍快乐 的 "2.3" 1. "Fast-forward" "Git" 在合并分支时会尽可能地使用 ...

  6. Mysql常用时间函数的用法和应用

    /* ---1)整型时间戳转换为date的格式(yyyymmdd, yyyy年mm月dd)--*/ , '%Y%m%d' ); -- 20090806 , '%Y年%m月%d' ); -- 2009年 ...

  7. CentOS 7安装Python 2.6(与已有版本共存)

    1. 安装需要用到的包 yum install -y zlib-devel bzip2-devel openssl-devel xz-libs wget 2. 下载 Python 2.6.8 版本 w ...

  8. Dubbo 序列化协议 5 连问,你接得住不?

    1)dubbo 支持哪些通信协议? 2)支持哪些序列化协议? 3)说一下 Hessian 的数据结构? 4)PB 知道吗? 5)为什么 PB 的效率是最高的? 面试官心理分析 上一个问题,说说 dub ...

  9. 分布式理论: CAP、BASE (转)

    分布式系统的CAP理论是由Eric Brewer于1999年首先提出的,又被称作布鲁尔定理(Brewer's theorem),CAP是对Consistency(一致性).Availability(可 ...

  10. java代码转化为jar包,再转化为.exe文件步骤

    下面是具体步骤: 一.先把自己的程序发布成jar文件 这是eclipse自带的功能,右键工程包-->Export 然后选择Java-->JAR file,next 选择输出路径,next ...