在 iFrame 中使用 JQuery UI.Resizable() 和 UI.Draggable() 时遇到问题 [英] Trouble Using JQuery UI.Resizable() and UI.Draggable() with an iFrame

问题描述

我正在尝试使用 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>

<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({也调整大小:#if"}).parent().dragable();});

为了运行应用程序，需要下载代码中引用的 jquery 文件.不过，代码应该向后兼容以前的版本.

我稍微更改了代码以简化一些事情.

我通过使用 prototype-window 库找到了解决此问题的替代方法.我更愿意使用 jQuery 而不是原型，因为许多基准测试要好得多，但由于我的时间紧迫，原型路线就可以了.如果有人有一些建议，我仍然有兴趣弄清楚这一点.再次感谢您的帮助.

如果我将 iframe 更改为 div，则上面的代码可以完美运行.问题似乎只是在涉及 iframe 时可拖动和可调整大小的扩展功能的方式.

解决方案

@aleemb:我不相信他在谈论这个.我认为问题出在 Iframe 而不是可拖动和可调整大小的组合.

@regex:我遇到了同样的问题，它也通过使用原型工具包的先前实现而表现出来.

我的实现使用 Iframe 作为画布，在其上放置可拖动对象.您可以看到错误的方法是将鼠标移动得太快，以便光标离开可拖动 DIV 的边缘.DIV 停止移动，鼠标继续移动；通过将鼠标移回 DIV 的表面，它会再次拾取 DIV 并开始移动，即使您已经释放了鼠标点击.

我怀疑 Iframe 事件以某种方式干扰了 jquery 事件.

我的解决方案是在 Iframe 和可拖动/可调整大小之间放置一个透明的 DIV 标签.

通过这种方式，iframe 永远不会看到鼠标移动，因此不会干扰.

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

韦斯

更新！我重新审视了这个问题，iframeFix 似乎在所有浏览器中都适用于可拖动的，但可调整大小的没有等效的修复.

我用这段代码手动添加了一个掩码DIV:

$elements.resizable({//将其标记为可调整大小遏制:#docCanvas"，开始:功能(事件，用户界面){//在Iframe上添加一个掩码以防止IE窃取鼠标事件$j("#docCanvas").append("<div id="mask" style="background-image:url(images/spacer.gif); position: absolute; z-index: 2; left:0pt；顶部:0pt；右侧:0pt；底部:0pt；"></div>");},停止:功能(事件，用户界面){//拖动结束时移除遮罩$j("#mask").remove();}});

还有 HTML:

<iframe src="something.html"></iframe>

spacer.gif 是一个 1x1 像素的透明 gif.

这解决了 IE7 & 的问题IE8.IE6 的 z-index 有问题，似乎无法弄清楚 DIV 应该在 IFrame 和可调整大小的 DIV 之间.我放弃了 IE6.

韦斯

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

这篇关于在 iFrame 中使用 JQuery UI.Resizable() 和 UI.Draggable() 时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！