代码之家 › 专栏 › 技术社区 › regex

在iframe中使用jquery ui.resizable()和ui.draggable()时出现问题

iframe css html jquery

regex · 技术社区 · 16 年前

我正在尝试使用jquery创建一个对话框窗口。到目前为止,我正在取得进展,但遇到了一些与iFrame有关的问题…我知道iframes通常不受欢迎,但它们是唯一能满足项目要求的东西。

无论如何,我可以成功地实现可调整大小和可拖动的插件,但是如果用户拖动到快速并将鼠标移到对话框内部分区中包含的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,因为许多基准测试都要好得多,但是由于我的时间紧迫,protype路径可以做到。不过,如果有人有什么建议的话,我还是有兴趣弄清楚。再次感谢你的帮助。

编辑:如果我将iframe更改为一个div,上面的代码就可以完美地工作。只有当涉及和iframe时,可拖动和可调整大小的扩展才是问题所在。

6 回复 | 直到 16 年前

wes 15 年前

@阿莱姆:我不相信他是这么说的。我认为问题在于iframe,而不是可拖动和可调整大小的组合。

@regex:我有同样的问题,它也通过使用原型工具箱的先前实现来实现。

我的实现使用一个iframe作为画布,用于放置draggables。你能看到错误的方式是移动你的鼠标太快,以至于光标离开可拖动分区的边缘。分区停止移动,你的鼠标继续移动;通过移动你的鼠标回到分区的表面,它再次拿起分区,并开始移动,即使你已经释放了鼠标的点击。

我怀疑iframe事件会以某种方式干扰jquery事件。

我的解决方案是在iframe和draggables/resizables之间放置一个透明的DIV标记。

这样,iframe就不会看到鼠标的移动,因此也不会受到干扰。

编辑:参见代码示例: http://dpaste.com/hold/17009/

韦斯

更新!我重新讨论了这个问题,iframefix在所有的Draggables浏览器中似乎都能很好地工作,但是可调整大小的文件没有相同的修复。

我使用此代码手动添加了一个mask 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。

韦斯

aleemb 16 年前

遇到同样的情况 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();

sparker 15 年前

我相信您也可以通过将“iframefix”参数添加到可拖动的初始化中来解决这个问题,如文档中“选项”下所述。 http://jqueryui.com/demos/draggable/

James 15 年前

不幸的是,iframefix存在一个问题,即一旦可拖动,就很难释放透明的div。我以前写过另一个更强大的版本,但不幸的是我丢失了代码…如果我能解决这个问题,我将重新发布我的代码。

编辑:好的,我制定了一个手册,但更好的方法是……至少在我的情况下

当单击包含DIV时(鼠标向下),仍然在iframe容器的顶部创建一个透明的DIV。这个透明的DIV放置在顶部-90%,这应该使它超过iframe(取决于您的样式,它可能更像顶部-100%;)。在transparent div的onmouseupevent上,添加代码以删除透明div。

JS-函数函数coveriframes()。{ $(“.normalWindow”).append(“”); }

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

用于透明分区的CSS样式盖{ 宽度:100%; 身高:100%; 顶部:-90%; 职位:相对; }

示例HTML

vishal 14 年前

试试这个

$('div').draggable(iframefix:true);

这应该管用

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

Sasha 11 年前

在使用了类似于@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”。