div拖拽到iframe上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法
思路一:用在开始进行缩放(触发了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上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法的更多相关文章
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- 使用MethodSwizzle导致按home app进入后台或者app间切换发生crash的解决方法
参考文章: 1.http://blog.csdn.net/alincexiaohao/article/details/45913857 2.http://www.cocoachina.com/ios/ ...
- odoo中pos模块由于删除partner导致发生(你试图访问的单据已经删除)错误的解决方法
model.js文件中 push_order: function(order) { var self = this; if(order){ this.proxy.log('push_order',or ...
- 关于换了手机后,导致原来连的fiddler抓不到新手机上的包的解决方法
原来我们测试都是一台安卓机,一台ios机,由于机子不够,所以安卓机都是自己的手机,可以连内网,也可以连外网 但是最近这几天,不知道公司抽了什么风.把网都给限制了,只有公司的测试机,才能连内网测,结果我 ...
- 因为曾经装过Mysql导致再次装时windows无法启动MySQL服务报错1067的解决方法
找到这里 MySQL右击属性 检查这里的可执行文件的路径是否正确,因为我这里显示的是原先的文件夹所以会一直启动失败,修改一下 这里你去百度经验 windows服务修改可执行文件路径 网址https:/ ...
- Android 自定义ImageView支持缩放,拖拽,方便复用
今天刚发了一篇关于ImageView的缩放和拖拽的博客,然后我想了下,将他自定义下,方便我们来复用这个imageView,效果我就不多说了,http://blog.csdn.net/xiaanming ...
- C#实现GDI+基本图的缩放、拖拽、移动
C#实现GDI+基本图的缩放.拖拽.移动示例代码如下: using System;using System.Collections.Generic;using System.ComponentMode ...
- ie7下div覆盖在iframe上方,ie8就不行,怎么解决
<div style="position:relative;display:inline-block;width:178px;height:90px;z-index:9999;top: ...
- 缩放系列(三):一个可以手势缩放、拖拽、旋转的layout
弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...
随机推荐
- linux iptables相关
iptables -A INPUT -p udp --dport 90 -j ACCEPT iptables -A INPUT -p tcp -m state --state ESTABLISHED ...
- Java ——接口
本节重点思维导图 定义: public interface Traffic { public static final int sits = 4; public abstract void run() ...
- css文件引用
#i1l{ background-color: chartreuse; height: 40px; } #i2l{ background-color: olivedrab; height: 40px; ...
- BindWeb - Bind智能DNS管理系统介绍
2019-05-08 演示网站: https://bindw.cdneks.com demo/demo 2018-11-27 修改部署架构,取消网络共享存储设备,在每台BIND服务器启用NFS4并仅向 ...
- 概率与期望dp相关
概率与期望dp 概率 某个事件A发生的可能性的大小,称之为事件A的概率,记作P(A). 假设某事的所有可能结果有n种,每种结果都是等概率,事件A涵盖其中的m种,那么P(A)=m/n. 例如投掷一枚骰子 ...
- linux中文件IO
一. linux常用文件IO接口 1.1. 文件描述符 1.1.1. 文件描述符的本质是一个数字,这个数字本质上是进程表中文件描述符表的一个表项,进程通过文件描述符作为index去索引查表得到文件表指 ...
- [Luogu 5465] [LOJ 6435] [PKUSC2018]星际穿越(倍增)
[Luogu 5465] [LOJ 6435] [PKUSC2018]星际穿越(倍增) 题面 n个点的图,点i和[l[i],i)的所有点连双向边.每次询问(l,r,x)表示x到[l,r]的所有点的最短 ...
- mac下安装php zookeeper扩展
安装步骤 php-zookeeper依赖libzookeeper,所以需要先安装libzookeeper 安装libzookeeper cd /usr/local/src/ wget http://m ...
- 模板 - SG函数
https://scut.online/p/93 每次取走的石子是b的幂次.打表暴力发现规律. #include <bits/stdc++.h> using namespace std; ...
- ECCV2014 Accepted paper
今天早上看到小伙伴们说ECCV2014结果出来了, 自己于是赶紧看了下, 感觉ECCV2014显著性的文章和以往的不太一样. 1.Salient Montages from Unconstrained ...