Jquery ui IFrame中的jQuery可拖动处理程序_Jquery Ui_Iframe_Draggable

Jquery ui IFrame中的jQuery可拖动处理程序

jquery-ui iframe

Jquery ui IFrame中的jQuery可拖动处理程序,jquery-ui,iframe,draggable,Jquery Ui,Iframe,Draggable,多丰盛的食物啊基本上，我有一个父级，其中有一个。我需要iframe中的一个元素作为拖动父div的句柄。这可能吗我试过： $(node).draggable("option","handle",$('iframe',node).contents().find('#handle')); $(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]); 它的目标是正确的DOM元素，但它不会拖动

多丰盛的食物啊

基本上，我有一个父级

，其中有一个

。我需要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上接收事件。奇怪。

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

handle

是否包含元素列表？如果是这样，请仔细查看

文档

对象，它是

框架内容

——URL是

“about:blank”

？这只是一种预感，但如果您得到这些输出，它可能在加载帧内容之前（即，

#handle

元素存在之前）执行jQuery选择器

在这种情况下，您可以将事件添加到IFRAME的文档中，并通过

window.parent

与父帧通信

我决定尝试一下，伙计，使用内部iframe节点作为句柄需要大量的工作，但进展甚微。不管怎么说，这里有两个解决方案，第一个不太管用，但是如果你能让它发挥作用，它可能更可取

main.html（从演示中剽窃）

我花了一段时间才找到“有效”的东西。这里的问题是，由于mousedown事件发生在iframe中的一个元素上，所以mouse事件是相对于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索引已关闭。如果在iframe之前声明div，并且没有指定z索引，那么iframe将位于顶部

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

试试这个

$（'#Div'）.draggable（{iframeFix:true}）

这应该可以工作

现在无法测试，因此将很快尝试，但我正在更改iframe中window.onload上的选项，因此我假设它已准备就绪。当我记录找到的内容时，它是正确的DOM元素。也许这是不可能的。哇，谢谢你的辛勤工作。我想我会尝试第二种解决方案。我想第一辆车太多了。谢谢！和iFrameFix一起拖拉对我来说还是太晚了。如果对话是一个可接受的解决方案，那么对话效果更好。它仍然可以拖动，但也可以关闭。

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

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

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

<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>