JQuery可拖拽和可调整大小的IFrame解决方案

Question

最近我使用JQuery Draggable和Resizable插件遇到了一些问题。在寻找解决方案时，我在许多不同的地方发现了一些非常零散的代码，最终得出了一个干净的解决方案，似乎对我来说几乎完美地运作。

我想与其他人分享我的发现，如果他们也遇到了这个问题。

我有一个包含IFrame的div。这个div必须可以调整大小和拖动。很简单-只需将JQuery Draggable和Resizable添加到div中：

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

当你拖动另一个包含 iframe 的 div 或尝试调整当前 div 的大小时，一切都很顺利，直到移动到当前 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();
    }
});

享受吧！

注：为了创建窗口，这里有一些额外的代码，当选择它们时，它们会被带到其他可拖动元素的前面：

在可拖动的开始函数中 -

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

- Bob

---

此外，JQuery UI 对话框是在页面上获取浮动 iframe 的非常简单的方法 :) - daitangio

你有这个的jsfiddler或者其他什么东西吗，这样我就可以在上下文中看到它了吗？我不确定你的HTML设置是怎样的，所以你的选择器对我来说没有任何意义。谢谢。 - bladefist

嘿，如此简单却如此有效。 - James Long

Answer 1

试一下这个：

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

这应该可以正常工作。

- vishal

---

这是我尝试的第一件事，在多种情况下都失败了，我不确定为什么，因为本质上它与我实现的相同。 - Bob

实际上，由于某些原因，它禁用了可拖动元素内的链接，最终我做了这个替代方案：https://dev59.com/ZlbTa4cB1Zd3GeqP7yG2#5646590 - im_brian_d

尝试理解我为了解决这个bug挣扎了一个小时的感受，最终我找到了这个解决方案，iframeFix: true - 多么显而易见。救了我的一天。谢谢！ - geevee

Answer 2

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

对我来说效果很好，但我不确定为什么以前没有提到过，据我所知pointer-events CSS属性已经存在于2010年。

- stt

Answer 3

有许多方法可以实现这一点，具体取决于您的需求。我发现调整/拖动许多窗口会严重减慢用户界面，因此我最终选择在调整大小/拖动时隐藏iframes，并使用边框来帮助导航。

有一些jQuery插件可以实现部分功能，但很多插件难以处理iframes。

将窗口置于前台也可以在某些情况下进行改进，并且可能无法在所有情况下正常工作。

- Bob

---

这对我非常有效，只需在“开始”和“停止”上进行简单的调用$（'iframe'）.toggle（）（有关设置这些回调的示例，请参见其他答案）即可。 - Grimeh

Answer 4

为什么这么难？有更简单的解决方案：

• 将您的 iframe 放置在带有一些 z-index（例如 0）的相对 div 中
• 同样地，使 iframe 变成相对定位，并在拖动期间将其 z-index 更改为 -1：

代码：

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

- Dmitri

Answer 5

我最初也尝试了Byron Cobb的解决方案，但由于我正在使用对话框元素，并且当显示对话框时不需要Iframe（它是一个保存对话框），所以我喜欢使用modal选项：

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

- cbix

Answer 6

所有的答案都很好，但对我来说都不容易实现！

我得到了帮助，但最终我使用了：

在Iframe头部的<script>标签中：

var iframes = window.parent.$('iframe');
iframes.each(function () {
    if ($(this).attr('src') == '<YOUR SOURCE PATH>')
    $(this).css('z-index', '-1');
});

这是为解决TinyMCE IFrame可拖动性问题而进行的修复。在iframe中应用此代码后，可以解决不可拖动的问题。另外，请检查*.js文件的顺序，它会产生影响！

- Rusty Nail