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

概述我正在尝试使用JQuery创建一个对话框窗口.到目前为止,我正在取得进展,但遇到了一些问题,而且iframe …我知道iframe通常不赞成,但它们是唯一能满足项目要求的东西. 无论如何,我可以成功实现可调整大小和可拖动的插件,但是如果用户拖动到快速并且鼠标悬停在对话框内部div中包含的iframe上,我会遇到问题.有点难以解释,但下面的代码应该有助于显示正在发生的事情. 几乎看起来一旦鼠标越过i 我正在尝试使用Jquery创建一个对话框窗口.到目前为止,我正在取得进展,但遇到了一些问题,而且iframe …我知道iframe通常不赞成,但它们是唯一能满足项目要求的东西.

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

几乎看起来一旦鼠标越过iframe,iframe就会窃取mousedown事件的焦点.我想知道是否有任何办法解决这个问题.

谢谢,
克里斯

<div ID="container" >    <iframe ID="if" src="http://Google.com" ></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,上面的代码完美无瑕.该问题似乎只是涉及可拖动和可调整大小的扩展功能的方式.

解决方法 @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" >    <iframe src="something.HTML"></iframe></div>

spacer.gif是1×1像素透明gif.

这解决了ie7和IE的问题. ie8. ie6在z-index方面遇到麻烦,似乎无法弄清楚div应该在iframe和可调整大小的div之间.我放弃了ie6.

韦斯

总结

以上是内存溢出为你收集整理的麻烦使用带有iFrame的JQuery UI.Resizable()和UI.Draggable()全部内容，希望文章能够帮你解决麻烦使用带有iFrame的JQuery UI.Resizable()和UI.Draggable()所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。