在iFrame中使用JQuery UI.Resizable()和UI.Draggable()时遇到问题
我正在尝试使用JQuery创建一个对话框窗口。到目前为止，我正在取得进展，但在iframe上遇到了一些问题...我知道iframe通常不受欢迎，但它们是唯一能满足项目需求的东西。
无论如何，我可以成功地实现可调整大小和可拖动的插件，但是如果用户拖动到fast并将鼠标放在对话框的内部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而不是prototype，因为许多基准测试要好得多，但由于我的时间紧迫，protype路线也可以。不过，如果有人有什么建议的话，我仍然有兴趣弄清楚这一点。再次感谢你的帮助。
编辑:如果我把iframe改成div，上面的代码就能完美地工作。这个问题只出现在当涉及到iframe时，可拖动和可调整大小的扩展功能的方式。
Stack Overflow用户
发布于 2009-03-20 18:17:32
@aleemb:我不相信这是他所说的。我认为问题出在Iframe，而不是可拖动和可调整大小的组合。
@regex:我也有同样的问题，它也在之前使用prototype工具包的实现中表现出来。
我的实现使用Iframe作为画布来拖放可拖放的对象。你可以看到错误的方式是移动鼠标太快，这样光标就离开了可拖动DIV的边缘。DIV停止移动，而您的鼠标继续移动；通过将鼠标移回DIV的表面，即使您松开鼠标的单击，它也会再次拾起DIV并开始移动。
我怀疑Iframe事件以某种方式干扰了jquery事件。
我的解决方案是在Iframe和draggables/resizables之间放置一个透明的DIV标签。
通过这种方式，iframe永远不会看到鼠标的移动，因此不会干扰。
编辑:请参阅代码示例：http://dpaste.com/hold/17009/
Wes
更新！我重新考虑了这个问题，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。
Wes
https://stackoverflow.com/questions/509118
复制相似问题
腾讯云开发者
