JQuery可拖动并可在IFrame上调整大小(解决方案)

Question

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

我以为我会和其他人分享我的发现,如果他们也遇到过这个问题.

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

Answer 1

试试这个:

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

这应该工作.

Answer 2

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

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

Answer 3

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

有一些 jquery 插件可以实现部分此功能，但许多插件都难以使用 iframe。

前置也可以在某些方面进行改进，但可能并不适用于所有情况。