JQuery Draggable and Resizeable over IFrames（解决方案）答案

【问题标题】：JQuery Draggable and Resizeable over IFrames (Solution)JQuery Draggable and Resizeable over IFrames（解决方案）
【发布时间】：2011-04-07 08:00:15
【问题描述】：

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

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

我有一个包含 IFrame 的 div。这个 div 必须是可调整大小和可拖动的。很简单 - 像这样将 jquery 可拖动和调整大小添加到 div：

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

在您拖动另一个包含 iframe 的 div 或尝试通过移动当前 iframe 来调整当前 div 的大小之前，一切都很好。当超过 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);

【问题讨论】：

另外，JQuery UI 对话框是在页面上获取浮动 iframe 的一种非常简单的方法：)
你有这个或什么的 jsfiddler，所以我可以在上下文中看到它吗？我不确定您是如何设置 html 的，因此您的选择器对我没有任何意义。谢谢
嘿。如此简单，但效果很好

标签： jquery iframe draggable resizable

【解决方案1】：

试试这个：

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

这应该可行。

【讨论】：

这是我尝试的第一件事，但在多种情况下都失败了，我不知道为什么，因为它基本上与我实现的相同。
实际上它出于某种原因禁用了可拖动元素中的链接，最终改为这样做：stackoverflow.com/a/5646590/1342440
当我为这个 bug 挣扎了一个小时，终于找到了这个解决方案，iframeFix: true 时，试着理解我的感受 - 多么明显。拯救了我的一天。谢谢！

【解决方案2】：

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

对我来说很好，不知道为什么之前没有提到它，据我所知，pointer-events CSS 属性在 2010 年就已经存在了。

【讨论】：

【解决方案3】：

有多种方法可以实现这一点，一切都取决于您的需求。我发现调整/拖动许多窗口会大大降低 UI 的速度，因此我最终在开始调整大小/拖动时隐藏了 iframe，并带有边框以帮助导航。

有一些 jquery 插件可以实现部分功能，但很多都在 iframe 上遇到困难。

突出显示也可以在某些方面得到改进，但可能并非在所有情况下都有效。

【讨论】：

这对我来说非常有效，只需在start 和stop 上简单地调用$('iframe').toggle()（有关设置这些回调的示例，请参见其他答案）。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

为什么这么难？还有更漂亮的解决方案：

将你的 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');
    }
});

【讨论】：

【解决方案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 Draggable 问题。在 iframe 中应用此代码时，Non-Draggable 问题。另外，检查 *.js 文件的顺序，它会有所不同！

【讨论】：