标签：定位 absolute over 标签 node 示例 title ati 拖拽
思路一：用在开始进行缩放（触发了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上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法
标签：定位 absolute over 标签 node 示例 title ati 拖拽
原文地址：https://www.cnblogs.com/ajaxlu/p/9070890.html
