JQuery可拖动并可通过IFrames调整大小(解决方案)

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

我想我会分享我的发现给任何人，如果他们也来到这个问题。

我有一个div包含和IFrame。这个div必须调整大小并拖动。足够简单 – 将jquery draggable和可调整大小添加到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);

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