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:

 

<div id="draggable">
    <iframe src="http://www.baidu.com"></iframe>
</div>

 

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() {
        　　 $("<div class='ui-resizable-iframeFix' style='background: #fff;'></div>")
            .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() {
　　$("<div class='ui-draggable-iframeFix' style='background: #fff;'></div>")
    .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 '<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);
        });
    }
});

兩種思路我偏向第一種用法，效果比第二種好，第二種雖然不會卡，但是有像頁面被全選的情況。