代码之家 › 专栏 › 技术社区 › Bob

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

resizable draggable iframe jquery

Bob · 技术社区 · 15 年前

我最近在使用JQuery可拖动和可调整大小的插件时遇到了一些问题。在寻找解决方案时,我在许多不同的地方发现了一些非常零碎的代码,并最终提交到一个干净的解决方案中,这个解决方案似乎对我来说几乎完美无瑕。

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

解决方案:

$("#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);

5 回复 | 直到 15 年前

markusschmitz 14 年前

试试这个:

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

这应该管用。

stt 10 年前

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

对我来说很好,不知道为什么之前没有提到它,据我所知,指针事件CSS属性在2010年就已经存在了。

Bob 15 年前

有很多方法可以实现这一点,都取决于你的需要。我发现调整/拖动许多窗口会大大降低UI的速度,因此,我在调整/拖动开始时用边框隐藏iframes以帮助导航。

“带到前面”也可以在某些点上进行改进,但可能不适用于所有情况。

cbix 14 年前

我首先也喜欢Byron Cobb的解决方案,但是由于我使用的是dialog元素,并且当显示对话框时不需要Iframe(这是一个保存对话框),所以我喜欢使用 modal 选项:

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

Dmitri 14 年前

为什么这么难?还有更好的解决方案:

将iframe放入带有z索引的相对div中,比如0
同时使iframe相对,并在拖动过程中将其z索引更改为-1:

$("#Div").draggable({
    start: function () {
        $("iframe").css('z-index', '-1');
    },
    stop: function () {
        $("iframe").css('z-index', '0');
    }
});

Rusty Nail 5 年前

所有伟大的答案,但没有一个是很容易实现我!

我得到了帮助,但最后,我用了:

<script> 标签:

var iframes = window.parent.$('iframe');
iframes.each(function () {
    if ($(this).attr('src') == '<YOUR SOURCE PATH>')
    $(this).css('z-index', '-1');
});

这是为了解决一个TinyMCE IFrame可拖动的问题。在iframe中应用此代码时,不可拖动的问题。另外,请检查*.js文件的顺序,这会有所不同!