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

Posted kele

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法的主要内容,如果未能解决你的问题,请参考以下文章

WPF中元素拖拽的两个实例

sortablejs 支持 iframe 跨域拖拽

编写可拖拽的弹窗

JavaScript--结合CSS变形缩放能拖拽的登录框

js实现可拖拽的div

一个可以拖拽的div