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

前端之家收集整理的这篇文章主要介绍了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);

解决方法

@H_301_25@ 尝试这个:
$('#Div').draggable({ iframeFix: true });

这应该工作。

原文链接:https://www.f2er.com/jquery/182444.html

猜你在找的jQuery相关文章