相关疑难解决方法(0)

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

我正在尝试使用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();
    }
);
Run Code Online (Sandbox Code Playgroud)


编辑:为了运行应用程序,需要下载代码中引用的jquery文件.但代码应该与以前的版本向后兼容.

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

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

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

html css iframe jquery

7
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

iframe ×1

jquery ×1