基于IFrame的JQuery可拖动和可resize（解决方案）

我最近遇到了一些使用JQuery Draggable和Resizable插件的麻烦。 寻找解决方案，我在许多不同的地方发现了一些非常零散的代码，最后归结为一个干净的解决方案，这似乎对我来说几乎是完美的。

如果他们也遇到这个问题，我想我会和别人分享我的发现。

我有一个包含和IFrame的div。 这个div必须是可resize和可拖动的。 足够简单 – 将jquery draggable和resizable添加到div中，如下所示：

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

一切都很好，直到您拖动包含iframe的另一个div或尝试通过移动当前的iframe来调整当前div的大小。 通过iframe时，这两个函数都会停止。

解：

 $("#Div").draggable({ start: function () { $(".AllContainerDivs").each(function (index, element) { var d = $('
'); $(element).append(d);}); }, stop: function () { $('.iframeCover').remove(); } }); $("#Div").resizable({ start: function () { $(".AllContainerDivs").each(function (index, element) { var d = $('
'); $(element).append(d); }); }, stop: function () { $('.iframeCover').remove(); } }); 

请享用！

PS：创建窗口的一些额外代码，当被选中时，被带到其他可拖动的前面：

在可拖动的启动function中 –

 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); 

Answer 1

试试这个：

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

这应该工作。

Answer 2

我所做的是定义body.dragging iframe {pointer-events: none;}然后在dragstart事件上添加dragging类到body并在dragend事件上删除它。

对我来说很好，不知道为什么之前没有提到它，据我所知，指针事件CSS属性已经在2010年左右。

Answer 3

有很多方法可以实现这一目标，这些都取决于您的需求。 我发现resize/拖动许多窗口会使UI减慢很多，因此我最终在resize/拖动开始时隐藏了iframe，并使用边框来帮助导航。

有一些jquery插件可以实现这个function的一部分，但很多都在讨论iframe。

带头也可以在点上改善，并且可能在所有情况下都不起作用。

Answer 4

为什么这么难？ 有更美丽的解决方案：

• 把你的iframe放在相对div中的一些z-index，比如说0
• 使iframe也相对并在拖动过程中将其z-index更改为-1：

码：

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

Answer 5

我首先也像Byron Cobb的解决方案一样，但是当我使用对话框元素并且在显示对话框时不需要Iframe（这是一个保存对话框）时，我喜欢使用模态选项：

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