前言

不僅僅是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);});} });

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

?

?

總結

以上是生活随笔為你收集整理的jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。