JQuery可拖動和通過IFrame調整大小（解決方案）

我最近遇到了一些麻煩，使用JQuery Draggable和Resizable插件。尋找解決方案後，我在許多不同的地方發現了一些非常分散的代碼，最後歸檔到一個乾淨的解決方案，這似乎對我來說幾乎完美。JQuery可拖動和通過IFrame調整大小（解決方案）

我想我會分享我的研究結果給其他人，如果他們也來過這個問題。

我有一個包含和IFrame的div。這個div必須是可調整大小和可拖動的。很簡單 - 增加了jQuery可拖動和resizable到div像這樣：

$("#Div").draggable(); 
$("#Div").resizable();

一切都很好，直到你拖過包含iframe另一個股利或嘗試調整當前的股利，通過移動在當前的iframe中。兩個函數都在iframe上停止。

解決方案：

$("#Div").draggable({ 
    start: function() { 
     $(".AllContainerDivs").each(function (index, element) { 
     var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>'); 
     $(element).append(d);}); 
    }, 
    stop: function() { 
     $('.iframeCover').remove(); 
    } 
}); 



$("#Div").resizable({ 
    start: function() { 
     $(".AllContainerDivs").each(function (index, element) { 
      var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>'); 
      $(element).append(d); 
     }); 
    }, 
    stop: function() { 
     $('.iframeCover').remove(); 
    } 
});

享受！

PS：一些額外的代碼來創建它，選擇的時候，被帶到其他拖拽元素的前窗：

在拖動啓動功能 -

var maxZ = 1; 
$(".AllContainerDivs").each(function (index, element) { 
    if ($(element).css("z-index") > maxZ) { 
     maxZ = $(element).css("z-index"); 
    } 
}); 
$(this).css("z-index", maxZ + 1);

來源

2010-09-02 Bob

你有這樣或東西jsfiddler，所以我可以在上下文中看到它嗎？我不確定你的html設置如何，所以你的選擇器對我來說沒有任何意義。謝謝 – bladefist 2011-11-14 17:04:53

heh。這麼簡單，但工作得很好 – 2013-02-01 13:35:35

另外JQuery UI對話框是一個非常簡單的方法來獲得頁面上的浮動iframe :) – daitangio 2010-09-23 11:49:57

有多種方式要實現這一點，一切取決於您的需求。我發現調整大小/拖動很多窗口會減慢UI的速度，因此我最終隱藏了調整大小/拖動邊框以幫助導航時的iframe。

有一些jquery插件可以實現這個功能，但是許多插件都與iframe相關。

帶到前面也可以改善點，並可能無法在所有情況下工作。

來源

2010-10-26 13:34:24 Bob

這對我來說非常合適，只需調用'$（'iframe'）。toggle（）'on 「開始」和「停止」（請參閱其他答案以設置這些回調的例子）就是需要的。 – Grimeh 2014-09-22 04:01:19

試試這個：

$('#Div').draggable({ iframeFix: true });

這應該工作。

來源

2010-11-17 09:23:38 vishal

這是我嘗試的第一件事，它在多種條件下失敗，我不知道爲什麼，因爲它本質上與我實施的相同。 – Bob 2010-11-17 19:13:43

爲我工作，謝謝 – 2014-07-06 02:55:37

實際上，由於某種原因，它禁用了可拖動元素內的鏈接，最終改爲執行此操作：http://stackoverflow.com/a/5646590/1342440 – 2014-07-06 03:28:06

我第一次還去喜歡拜倫科布的解決方案，但由於我使用一個對話框元素，當所示的對話框中不需要的iframe（這是一個保存對話框），我使用modal選項喜歡：

$('#savingDialog').dialog({ 
    modal: true 
});

來源

2012-04-13 21:24:55 flo

爲什麼這麼難？還有很多更漂亮的解決方案：

把你的iframe一些z-index的相對DIV中，說
化妝iframe中相對0也與改變拖動過程中它的z-index爲-1：

代碼：

$("#Div").draggable({ 
    start: function() { 
     $("iframe").css('z-index', '-1'); 
    }, 
    stop: function() { 
     $("iframe").css('z-index', '0'); 
    } 
});

來源

2012-04-25 14:47:21 Dmitri

我所做的就是定義body.dragging iframe {pointer-events: none;}再加入dragging類身體上dragstart事件，並刪除它dragend事件。

正常工作對我來說，不知道爲什麼它沒有被前面提到的，據我可以告訴指針事件CSS屬性已經圍繞在2010年

來源

2015-09-08 16:29:50 stt

JQuery可拖動和通過IFrame調整大小（解決方案）

回答

相關問題