麻烦使用带有iFrame的JQuery UI.Resizable()和UI.Draggable()

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文件.但代码应该与以前的版本向后兼容.

编辑:我稍微改变了代码以简化一些事情.

编辑:我找到了一种通过使用原型窗口库来解决此问题的替代方法.我宁愿使用jQuery而不是原型,因为许多基准测试都要好得多,但由于我的时间紧张,原型路由会做.如果有人有一些建议,我仍然有兴趣搞清楚这一点.再次感谢你的帮助.

编辑:如果我将iframe更改为div,上面的代码完美无瑕.这个问题似乎只是涉及可拖动和可调整大小的扩展功能的方式.

Answer 1

@aleemb:我不相信他正在谈论的是这个.我认为问题是Iframe而不是draggable和resizable的组合.

@regex:我有同样的问题,它也表现在使用原型工具包的先前实现.

我的实现使用Iframe作为拖放draggables的画布.您可以看到错误的方法是将鼠标移动得太快,以便光标离开可拖动DIV的边缘.DIV停止移动,你的鼠标继续前进; 通过将鼠标移回DIV表面,它会再次拾取DIV并开始移动,即使您已经释放了鼠标上的咔嗒声.

我怀疑Iframe事件会以某种方式干扰jquery事件.

我的解决方案是在Iframe和draggables/resizables之间放置一个透明的DIV标签.

以这种方式,iframe永远不会看到鼠标移动,因此不会干扰.

编辑:请参阅代码示例:http://dpaste.com/hold/17009/

韦斯

UPDATE!我重新审视了这个问题,iframeFix似乎在所有浏览器中都适用于draggables,但是resizables没有相应的修复程序.

我用这段代码手动添加了一个掩码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.

韦斯