无论如何,我可以成功实现可调整大小和可拖动的插件,但是如果用户拖动到快速并且鼠标悬停在对话框内部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,上面的代码完美无瑕.该问题似乎只是涉及可拖动和可调整大小的扩展功能的方式.
解决方法
@regex：我有同样的问题,它也表现在使用原型工具包的先前实现.
我的实现使用Iframe作为画布来放置draggables.您可以看到错误的方法是将鼠标移动得太快,以便光标离开可拖动DIV的边缘. DIV停止移动,你的鼠标继续前进;通过将鼠标移回DIV表面,它会再次拾取DIV并开始移动,即使您已经释放了鼠标上的咔嗒声.
我怀疑是iframe事件以某种方式干扰了jquery事件.
我的解决方案是在Iframe和draggables / resizables之间放置一个透明的DIV标签.
以这种方式,iframe永远不会看到鼠标移动,因此不会干扰.
编辑：参见代码示例：http://dpaste.com/hold/17009/
韦斯
UPDATE！我重新审视了这个问题,iframeFix似乎在所有浏览器中都适用于draggables,但是resizables没有相应的修复程序.
$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是1×1像素透明gif.
这解决了IE7和IE的问题. IE8. IE6在z-index方面遇到麻烦,似乎无法弄清楚DIV应该在IFrame和可调整大小的DIV之间.我放弃了IE6.
韦斯
