IFrame 内的 jQuery 可拖动处理程序

发布于 2024-09-13 06:56:46 字数 457 浏览 6 评论 0原文

真是满口啊。

基本上我有一个父

，里面有一个。我需要 iframe 内的一个元素作为拖动父 div 的句柄。这可能吗？

我已经尝试过了：

$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);

它瞄准的是正确的 DOM 元素，但它只是不会拖动。可能可以在 iframe 上覆盖一个隐藏的 div，但我发现当位置是绝对时，iframe 会在 div 上接收事件。奇怪的。

原文

What a mouthful.

Basically I have a parent <div> and inside that an <iframe>. I need an element inside the iframe to be the handle to drag the parent div. Is this even possible?

I have tried:

$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);

It is targeting the right DOM element but it just won't drag. It might be possible to overlay a hidden div ontop of the iframe but I have found the iframe takes the event over the div when position is absolute. Strange.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清风挽心 2024-09-20 06:56:46

试试这个

$('#Div').draggable({ iframeFix: true });

这应该有效

回复收藏 0 原文

墨落画卷 2024-09-20 06:56:46

我决定尝试一下，天哪，使用内部 iframe 节点作为句柄，工作量很大，但进展甚微。无论如何，这里有两个解决方案，第一个解决方案效果不太好，但如果你能让它工作，它可能会更理想。

main.html（抄袭自演示）

<div id="draggable" class="ui-widget-content" style="position:relative;">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
</div>

inside-handle.html

<html>
    <head>
        <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    </head>
    <body>
        <div id="innerHandle">handle</div>
    </body>
</html>

JavaScript

$(function () {
    var moveEvent;
    $(document).mousemove(function (e) {
        moveEvent = e;
    });

    $("#draggable").draggable();
    $('iframe', '#draggable').load(function () {
        $('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
            $('#draggable').draggable().data('draggable')._mouseDown(moveEvent);
            return false;
        });
    });
});

我花了一段时间才找到“有效”的东西。这里的问题是，由于 mousedown 事件发生在 iframe 内的元素上，因此鼠标事件是相对于 iframe 的，而不是主文档。解决方法是在文档上发生移动事件并从那里获取鼠标位置。问题再次是，如果鼠标位于 iframe 内部，则它“不”根据父文档移动。这意味着仅当鼠标到达父文档中 iframe 的边缘时才会发生拖动事件。

解决此问题的方法可能是使用计算出的 iframe 相对于鼠标移动的位置来手动生成事件。因此，当鼠标在 iframe 内移动时，请使用 iframe 到父文档的坐标来计算其移动。这意味着您需要使用 mousedown 事件而不是 mousemove 事件，

$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
    // do something with e
    $('#draggable').draggable().data('draggable')._mouseDown(e);
    return false;
});

第二种解决方案是您提到的方式，在 iframe 本身上有一个绝对定位的 div。我可以轻松地将 div 置于 iframe 之上，也就是说，

<div id="draggable" class="ui-widget-content" style="position:relative;">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
    <div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div>
</div>

您的 div 位于 iframe 后面的问题可能是因为 z-index 关闭了。如果您在 iframe 之前声明 div 并且未指定 z-index，则 iframe 将位于顶部。

无论你选择哪种方式，祝你好运！

I decided to take a stab at this and boy, it's a lot of work with little progress using an internal iframe node as a handle. Anyway, here are two solutions, the first one doesn't work really well, but if you can get it to work, it may be more desirable.

main.html (plagiarized from the demo)

<div id="draggable" class="ui-widget-content" style="position:relative;">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
</div>

inner-handle.html

<html>
    <head>
        <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    </head>
    <body>
        <div id="innerHandle">handle</div>
    </body>
</html>

JavaScript

$(function () {
    var moveEvent;
    $(document).mousemove(function (e) {
        moveEvent = e;
    });

    $("#draggable").draggable();
    $('iframe', '#draggable').load(function () {
        $('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
            $('#draggable').draggable().data('draggable')._mouseDown(moveEvent);
            return false;
        });
    });
});

It took me a while to find something that "worked." The problem here was that since the mousedown event occurred on an element inside the iframe, the mouse event is relative to the iframe, not the main document. The workaround is to have a move event on the document and grab the mouse position from there. The problem, once again, is that if the mouse is inside of the iframe, it is "not" moving according to the parent document. This means that the drag event only happens when the mouse reaches the edge of the iframe into the parent document.

A workaround for this might be to manually generate events with the calculated position of the iframe relative to its mouse movement. So when your mouse moves within the iframe, calculate its movement using the coordinate of the iframe to the parent document. This means that you need to use the event from the mousedown and not the mousemove,

$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
    // do something with e
    $('#draggable').draggable().data('draggable')._mouseDown(e);
    return false;
});

The second solution is the way you have mentioned, have an absolute positioned div over the iframe itself. I have no trouble in getting the div to be on top of the iframe, that is,

<div id="draggable" class="ui-widget-content" style="position:relative;">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
    <div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div>
</div>

The problem with your div being behind the iframe might be because the z-index is off. If you declare your div before the iframe and you didn't specify the z-index, then the iframe will be on top.

Whichever way you choose, good luck!

回复收藏 0 原文

两相知 2024-09-20 06:56:46

当您执行此操作时会发生什么（激活 firebug ）：

var frameContent = $('iframe',node).contents()
var handle = frameContent.find('#handle');
console.debug(frameContent, handle)

handle 是否包含以下列表元素？如果是这样，请仔细查看 Document 对象，即 frameContent - URL 是 “about:blank” 吗？这只是一种预感，但如果您获得这些输出，它可能在加载框架内容之前（即，在 #handle 元素存在之前）执行 jQuery 选择器。

在这种情况下，您可以向 IFRAME 文档添加事件，并通过 window.parent 与父框架进行通信。

what happens when you do this (with firebug activated):

var frameContent = $('iframe',node).contents()
var handle = frameContent.find('#handle');
console.debug(frameContent, handle)

Does handle contain a list of elements? And if so, look carefully at the Document object which is frameContent - is the URL "about:blank"? It's just a hunch, but if you get these outputs, it's probably executing the jQuery selector before the frame content has loaded (i.e., before the #handle element exists).

In which case, you can add an event to the IFRAME'd document, and communicate with the parent frame via window.parent.

回复收藏 0 原文

~没有更多了~