将 JQuery UI.Resizable() 和 UI.Draggable() 与 iFrame 一起使用时遇到问题

Question

我正在尝试使用 JQuery 创建一个对话窗口。到目前为止，我正在取得进展，但遇到了一些与 iframe 相关的问题......我知道 iframe 通常不受欢迎，但它们是唯一能满足项目要求的东西。

无论如何，我可以成功实现可调整大小和可拖动的插件，但是如果用户快速拖动并将鼠标悬停在对话框内部 div 中包含的 iframe 上，我会遇到问题。有点难以解释，但下面的代码应该有助于显示正在发生的事情。

似乎一旦鼠标越过 iframe，iframe 就会窃取 mousedown 事件的焦点。我想知道有没有办法解决这个问题。

谢谢， 克里斯

<div id="container" style="border: solid 1px Black; padding: 10px 10px 10px 10px; height: 520px; width: 420px;">
    <iframe id="if" src="http://google.com" style="width: 400px; height: 500px;"></iframe>
</div>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript">

$(document).ready(function()
    {
        $("#container").draggable();
        $("#container").resizable(
            {
                alsoResize: "#if"
            }
        ).parent().draggable();
    }
);

编辑：为了运行应用程序，需要下载代码中引用的 jquery 文件。不过，代码应该向后兼容以前的版本。

编辑：我稍微修改了代码以简化一些事情。

编辑：我找到了使用prototype-window 库解决此问题的替代方法。我宁愿使用 jQuery 而不是原型，因为许多基准测试要好得多，但由于我的时间紧迫，原型路线会做。如果有人有一些建议，我仍然有兴趣弄清楚这一点。再次感谢您的所有帮助。

编辑：如果我将 iframe 更改为 div，上面的代码可以完美运行。问题似乎只是涉及 iframe 时可拖动和可调整大小的扩展功能的方式。

Answer 1

最近遇到同一个resizable/redraggable problem。

// this will make <div id="box"> resizable() and draggable()
$('#box').resizable().parent().draggable();

// same but slightly safer since it checks parent's class
$('#box').resizable().parent('.ui-wrapper').draggable();

Answer 2

@aleemb：我不相信他在说什么。我认为问题出在 iframe 而不是可拖动和可调整大小的组合。

@regex：我也有同样的问题，而且它也体现在使用原型工具包的先前实现中。

我的实现使用 Iframe 作为画布，在其上放置可拖动对象。您可以看到该错误的方法是将鼠标移动得太快，以使光标离开可拖动 DIV 的边缘。 DIV 停止移动，鼠标继续移动；通过将鼠标移回 DIV 的表面，它会再次拾取 DIV 并开始移动，即使您已经释放了对鼠标的点击。

我怀疑 iframe 事件会以某种方式干扰 jquery 事件。

我的解决方案是在 Iframe 和可拖动/可调整大小之间放置一个透明的 DIV 标签。

通过这种方式，iframe 永远不会看到鼠标移动，因此不会干扰。

编辑：查看代码示例：http://dpaste.com/hold/17009/

韦斯

更新！我重新审视了这个问题，iframeFix 似乎在所有浏览器中都适用于可拖动对象，但可调整大小的对象没有等效的修复。

我用这段代码手动添加了一个蒙版DIV：

$elements.resizable({ //mark it as resizable
    containment: "#docCanvas",
    start: function(event, ui) {
        //add a mask over the Iframe to prevent IE from stealing mouse events
        $j("#docCanvas").append("<div id=\"mask\" style=\"background-image:url(images/spacer.gif); position: absolute; z-index: 2; left: 0pt; top: 0pt; right: 0pt; bottom: 0pt;\"></div>");
    },
    stop: function(event, ui) {
        //remove mask when dragging ends
        $j("#mask").remove();
    }
});

还有 HTML：

<div id="docCanvas" style="position: relative;">
    <iframe src="something.html"></iframe>
</div>

spacer.gif 是一个 1x1 像素的透明 gif。

这解决了 IE7 和 IE8 的问题。 IE6 在 z-index 方面存在问题，并且似乎无法确定 DIV 应该位于 IFrame 和可调整大小的 DIV 之间。我放弃了 IE6。

韦斯

Answer 3

我相信您也可以通过将“iframeFix”参数添加到可拖动初始化中来解决此问题，如“选项”下的文档中所述http://jqueryui.com/demos/draggable/

Answer 4

不幸的是，iframeFix 存在一个问题，即一旦可拖动透明 div 就很难释放。我之前写过另一个更强大的版本，但不幸的是我丢失了代码......如果我设法解决问题，我将重新发布我的代码。

编辑：好的，我制定了一个手册，但更好的方法......至少在我的情况下

当单击包含 div 时（onmousedown），您仍会在 iframe 容器的顶部创建一个透明 div。这个透明的 div 位于 top:-90%，这应该将它带到 iframe 上（取决于您的样式，它可能更像 top:-100%;）。在透明 div 的 onmouseupEvent 上，添加删除透明 div 的代码。

JSFUNCTIONS 函数coverIframes（）{ $(".normalWindow").append(""); }

function uncoverIframes() {
    $(".cover").remove();
}

透明 div 的 CSS 样式 div.cover { 宽度：100%； 高度：100%； 最高：-90%； 位置：相对； }

示例 HTML

Answer 5

试试这个

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

这应该可以工作

http://docs.jquery.com/UI/API/1.8/Draggable

Answer 6

使用类似于@wes 建议的解决方案后，我找到了一个更简单的解决方案，不需要javascript 代码。只需将以下内容添加到您的 CSS 中：

.ui-resizable-resizing:after
{
    content: '';
    position: absolute; 
    z-index: 999; 
    left: 0px; 
    top: 0px; 
    right: 0px;
    bottom: 0px;
}

一旦用户开始调整大小，jQuery 会添加 .ui-resizable-resizing 类，并添加一个叠加层。请注意，您需要在调整大小的对象上使用“位置：相对”。