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

我所做的是定义<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav>然后在dragstart事件中将body.dragging iframe {pointer-events: none;}类添加到body并在dragend事件中将其删除。

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

Answer 3

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

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

在前面也可以改善前置，并且可能无法在所有情况下都有效。

Answer 4

为什么这么难？有更美丽的解决方案：

将你的iframe放在相对div中，并带有一些z-index，比如0
使iframe也相对，并在拖动过程中将其z-index更改为-1：

代码：

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

Answer 5

我首先也像Byron Cobb的解决方案一样，但是当我使用对话框元素并且在显示对话框时不需要Iframe（这是一个保存对话框）时，我喜欢使用modal选项：

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

Answer 6

所有不错的答案，但没有一个对我来说很容易实现！

我得到了帮助，但最后我使用了：

在iframe标头<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文件的顺序，这会有所不同！

JQuery可拖动和可调整大小的IFrame（解决方案）

6 个答案: