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

前言

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

问题

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

测试代码

HTML:

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() {        　　 $("
     
")            .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() {　　$("
     
")    .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 '
     
';    },    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() {        $("
     
")            .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);        });    }});

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

转载：http://www.cnblogs.com/lovesong/p/3367322.html