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:

js:

解決思路

思路一：用在開始進行縮放（觸發了resizable的start事件）為iframe添加z-index屬性，将iframe放置在最下層。

這個做法在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。

結果：神奇的解決了，chrome、firefox、ie等，竟然都非常平滑，果然它山之石可以攻玉。

解決思路就不在這裡班門弄斧了，大家看看也就明白了。

還存在問題——draggable

在上面我說過，jquery ui 對draggable的iframefix下面這種解決思路。

這對draggable有很大問題——拖動還是會卡的，而且非常明顯。

原因就是  .css($(this).offset()) 和 width: this.offsetwidth+"px", height: this.offsetheight+"px"這個設定，遮擋層大小和位置就僅僅是原先iframe的大小和位置。如果滑鼠邊拖動iframe邊離開遮擋層，會有很明顯一卡一卡的情況，因為遮擋層外沒有遮擋，iframefix這東西就廢啦！！！！！

哈哈哈，是不是覺得坑叻。

不過還是有幾個解決方法：

思路一：使用helper,當helper移到指定位置再設定iframe的位置。

思路二：不使用iframefix。自己設定遮擋層，将遮擋層大小設為body的長寬，位置設定為top:0;left:0,

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

<b>轉載：</b><b>http://www.cnblogs.com/lovesong/p/3367322.html</b>