基于IFrame的JQuery可拖动和可调整大小（解决方案） [英] JQuery Draggable and Resizeable over IFrames (Solution)

问题描述

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

I recently ran into some troubles using JQuery Draggable and Resizable plugins. Looking for solutions, i found some very fragmented code in many different places and finally filed down to a clean solution which seems to work almost perfectly for me.

我以为我'如果他们也遇到过这个问题，请与其他人分享我的发现。

I thought i'd share my findings for anyone else, should they come accross this issue too.

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

I have a div which contains and IFrame. This div must be resizeable and draggable. Simple enough - add the jquery draggable and resizable to the div like so:

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

除非您拖动包含iframe的另一个div或尝试调整当前div的大小，否则一切正常移动当前的iframe。这两个函数在iframe上都会停止。

All is fine until you drag over another div containing an iframe or try to resize your current div, by moving over your current iframe. Both functions stop when over an 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：额外的一些创建窗口的代码，当被选中时，被带到其他可拖动的前面：

PS: Some extra code to create windows which, when selected, are brought to the front of the other draggables:

在可拖动的启动功能中 -

In the draggable start 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);

推荐答案

有很多方法可以实现这一目标，所有根据您的需要。我发现调整大小/拖动许多窗口会使UI减慢很多，因此我最终在调整大小/拖动时隐藏了iframe，并使用边框来帮助导航。

There are a number of ways to achieve this, all depending on your needs. I found resizing/dragging many windows slows the UI down a lot, and as such I ended up hiding the iframes on start of resize/Drag with a border to help navigation.

有一些jquery插件可以实现这个功能的一部分，但是许多插件都在使用iframe。

There are some jquery plugins that achieve part of this functionality, but many struggle with iframes.

前面的改进也可以在点数上得到改善，但可能并不适用于所有情况。

The bring to front can also be improved at points and may not work in all situations.

这篇关于基于IFrame的JQuery可拖动和可调整大小（解决方案）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！