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

编辑：我稍微改了一下代码以简化一些事情。

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

编辑：如果我将iframe更改为div，上面的代码完美无瑕。该问题似乎只是涉及可拖动和可调整大小的扩展功能的时候和iframe的使用方式。

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和IE的问题。 IE8。 IE6在z-index方面存在问题，似乎无法弄清楚DIV应该在IFrame和可调整大小的DIV之间。我放弃了IE6。

韦斯

Answer 2

最近进入同一resizable/redraggable problem。

// this will make <div id="box"> resizable() and draggable()
$('#box').resizable().parent().draggable();

// same but slightly safer since it checks parent's class
$('#box').resizable().parent('.ui-wrapper').draggable();

Answer 3

我相信您也可以通过将“iframeFix”参数添加到可拖动初始化来解决此问题，如“选项”http://jqueryui.com/demos/draggable/

下的文档中所述

Answer 4

不幸的是，iframeFix存在一个问题，即一旦可拖动就难以释放透明div。之前我曾写过另一个更强大的版本，但遗憾的是我丢失了代码...如果我设法解决了这个问题，我将重新发布我的代码。

编辑：好的，我制定了一个手动但更好的方法......至少在我的情况下

当单击包含div（onmousedown）时，您仍然会在iframe容器的顶部创建一个透明div。这个透明的div位于顶部：-90％，它应该将它带到iframe上（在你的造型上展开它可能更像顶部：-100％;）。在透明div的onmouseupEvent上，添加代码以删除透明div。

JSFUNCTIONS function coverIframes（）{ $（ “normalWindow ”）追加（“”）。 }

function uncoverIframes() {
    $(".cover").remove();
}

透明div的CSS样式 div.cover { 宽度：100％; 高度：100％; 顶部：-90％; 位置：相对; }

示例HTML

Answer 5

试试这个

$（'＃Div'）。draggable（{iframeFix：true}）;

这应该有效

http://docs.jquery.com/UI/API/1.8/Draggable

Answer 6

在使用类似于@wes建议的解决方案后，我发现了一个更简单的解决方案，不需要javascript代码。只需将以下内容添加到CSS中：

.ui-resizable-resizing:after
{
    content: '';
    position: absolute; 
    z-index: 999; 
    left: 0px; 
    top: 0px; 
    right: 0px;
    bottom: 0px;
}

一旦用户开始调整大小，jQuery就会添加.ui-resizable-resizing类，并添加一个叠加层。请注意，在调整大小的对象上需要“position：relative”。

麻烦使用带有iFrame的JQuery UI.Resizable（）和UI.Draggable（）

6 个答案: