快速收缩时jQuery调整iframe停止答案

【问题标题】：jQuery resize iframe stops when contracting quickly快速收缩时jQuery调整iframe停止
【发布时间】：2012-08-23 14:45:19
【问题描述】：

我正在使用 jQuery 的 resizable() 函数来调整 div 的大小，该 div 包含一个 iframe，其宽度和高度设置为 100%（以填充 div 的空间）。我遇到的问题是，当我在任一方向向内调整大小（缩小 div）时 - 如果我将鼠标移动得太快，它会失去抓取（使 div 固定）并且不再调整大小，直到我将鼠标重新对准角落。

在展开 div 时效果很好，我可以通过快速移动鼠标来做到这一点，但必须小心移动 div 以确保它不会卡住，这很烦人。

有什么想法吗？

非常感谢。

编辑：

我已将示例上传到我的网站： http://stefandunn.co.uk/concepts/drag&drop/

只需单击“网页”小部件并调整其大小。

【问题讨论】：

标签： jquery html iframe resizable

【解决方案1】：

过去我有同样的问题，我找到的解决方案/hack是这样的：

$("yourObjectToResize").resizable({
    //containment: 'parent',
    minWidth: 400,
    minHeight: 200,
    start: function () {
        $(".widget_box").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();
    }
});

【讨论】：

这似乎没有任何效果:(
立即尝试。我已将插入框架盖的选择器更改为示例中的类。
这也适用于可拖动，只需放下 minWidth 和 minHeight 设置。

【解决方案2】：

如果没有实时示例，很难说，但我认为这是因为 iframe 本身中的其他悬停/鼠标事件。调整大小时，您可以尝试查看以下选项：

.preventDefault();
.stopPropagation();
.stopImmediatePropagation();

好的，快速浏览一下，我想如果您使用.resizeable() 上的start: 事件，将网页 div 的 z-index 设置在 iframe 的 z-index 之上，然后将其放回在stop: 事件下方，您应该很好。

嗯，我认为 z-index 不起作用，请在 .resizable() 的启动事件中尝试上述选项；

如果我稍后有时间，我会尝试设置一个适当的测试并为你寻找。

【讨论】：