麻烦使用jQuery UI.Resizable（）和UI.Draggable（）与iFrame [英] Trouble Using JQuery UI.Resizable() and UI.Draggable() with an iFrame

问题描述

我正在尝试使用JQuery创建一个对话框窗口。我目前正在取得进展，但遇到了一些问题与iframe ...我知道iframe通常被皱眉，但他们是唯一的东西，将满足项目的要求。

无论如何，我可以成功地实现可调整大小和可拖动的插件，但我遇到了问题，如果用户拖动快速和鼠标悬停在对话框的内部div中包含的iframe。种类很难解释，但下面的代码应该可以帮助显示发生了什么。

这似乎一旦鼠标穿过iframe，iframe偷了焦点mousedown事件。

感谢您，
Chris

 < div id =containerstyle = border：solid 1px Black; padding：10px 10px 10px 10px; height：520px; width：420px;> 
< iframe id =ifsrc =http://google.comstyle =width：400px; height：500px;>< / iframe> 
< / div> 
 
< script type =text / javascriptsrc =jquery-1.2.6.js>< / script> 
< script type =text / javascriptsrc =jquery.ui.all.js>< / script> 
< script type =text / javascript> 
 
 $（document）.ready（function（）
 {
 $（＃container）。draggable（）; 
 $（＃container） .resizable（
 {
 alsoResize：#if
} 
）.parent（）。draggable（）; 
} 
）; 
  

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


编辑：我改变了一些代码，以简化一点。


编辑：我发现通过使用原型窗口库来解决此问题的另一种方法。我宁愿使用jQuery超过原型，因为许多基准都是好多了，但由于我的时间紧缩原型路由会做。我仍然有兴趣了解这个，虽然如果有人有一些建议。再次感谢您的帮助。


编辑：如果我将iframe更改为div，上面的代码完美无缺。

解决方案

@aleemb：I不相信这是他在说什么。我相信问题是Iframe，而不是draggable和可调整大小的组合。

@regex：我有这个相同的问题，它也表现为一个先前的实现使用原型工具包。

我的实现使用一个Iframe作为拖放拖拽的画布。您可以看到错误的方式是移动鼠标太快，以使光标离开可拖动DIV的边缘。 DIV停止移动，你的鼠标继续前进;通过将鼠标移回DIV的表面，它会再次拾取DIV并开始移动，即使您已释放鼠标的点击。

我的猜疑

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

以这种方式，iframe从不会看到鼠标移动，因此不会干扰。

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

Wes

更新！我重温了这个问题，iframeFix似乎工作伟大的所有浏览器的draggables，但可重新配置没有等效的修复。

我使用这个代码手动添加一个掩码DIV：

  $ elements.resizable（{//将其标记为可调整大小
遏制：#docCanvas ，
 start：function（event，ui）{
 //在Iframe上添加一个掩码，防止IE窃取鼠标事件
 $ 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）{
 //拖动结束时移除掩码
 $ j（＃mask）。remove（）; 
} 
}）; 
  

HTML：

 < div id =docCanvasstyle =position：relative;> 
< iframe src =something.html>< / iframe> 
< / div> 
  

spacer.gif是1x1像素透明的gif。

这解决了IE7& IE8。 IE6有z-index的麻烦，似乎不能弄清楚DIV应该在IFrame和可调整大小的DIV之间。我放弃了IE6。

Wes

I'm trying to create a dialog window using JQuery. I'm making progress so far, but running into some issues w/ the iframe... I know that iframes are usually frowned upon, but they are the only things that will meet the requirements of the project.

Anyway, I can successfully implement the resizable and draggable plugins, but I run into issues if the user drags to fast and mouses over the iframe that is contained in the dialog's inner div. Kind of difficult to explain, but the code below should help show what is happening.

It almost seems like once the mouse crosses over the iframe, the iframe steals the focus of the mousedown event. I'm wondering if there is any way around this.

Thanks, Chris

<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();
    }
);

EDIT: In order to run the app, the jquery files referenced in the code will need to be downloaded. The code should be backwards compatible with previous versions though.

EDIT: I changed the code up a bit to simplify things a bit.

EDIT: I found an alternative method to solving this problem by using the prototype-window libraries. I would much rather use jQuery over prototype since many of the benchmarks are a lot better, but due to my time crunch the protype route will do. I'm still interested in figuring this out though if anyone has some advice. Thanks again for all your help.

EDIT: If I change the iframe to a div, the code above works flawlessly. The issue only appears to be the way that the draggable and resizable extensions function when and iframe is involved.

解决方案

@aleemb: I don't believe that is what he's talking about. I believe the problem to be the Iframe and not the combination of the draggable and resizable.

@regex: I have this same issue and it also manifested itself with a prior implementation using the prototype toolkit.

My implementation uses an Iframe as a canvas on which to drop draggables. The way you can see the bug is to move your mouse too fast so that the cursor leaves the edge of the draggable DIV. The DIV stops moving and your mouse keeps going; by moving your mouse back to the surface of the DIV, it picks up the DIV again and starts moving even if you've released the click on your mouse.

My suspicion is that the Iframe events somehow interfere with the jquery events.

My solution was to position a transparent DIV tag between the Iframe and the draggables/resizables.

In this manner, the iframe never sees the mouse movement and as such doesn't interfere.

EDIT: See code sample: http://dpaste.com/hold/17009/

Wes

UPDATE! I revisited this issue and the iframeFix seems to work great in all browsers for the draggables, but the resizables do not have the equivalent fix.

I used this code to manually add a 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();
    }
});

And the HTML:

<div id="docCanvas" style="position: relative;">
    <iframe src="something.html"></iframe>
</div>

spacer.gif is a 1x1 pixel transparent gif.

This fixes the issue for IE7 & IE8. IE6 has trouble with z-index and can't seem to figure out that the DIV should be between the IFrame and the resizable DIV. I gave up on IE6.

Wes

这篇关于麻烦使用jQuery UI.Resizable（）和UI.Draggable（）与iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！