Question

多么满口。

基本上我有一个父<div>，里面有一个<iframe>。我需要iframe中的一个元素作为拖动父div的句柄。这甚至可能吗？

我试过了：

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

它的目标是正确的DOM元素，但它不会拖动。有可能在iframe上覆盖一个隐藏的div，但我发现当position是绝对的时，iframe会将事件放在div上。奇怪。

Answer 1

试试这个

$（'＃Div'）。draggable（{iframeFix：true}）;

这应该有效

Answer 2

我决定对这个和男孩进行一次尝试，这是很多工作，使用内部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>

内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，而不是主文档。解决方法是在文档上放置一个move事件并从那里抓取鼠标位置。问题再一次是，如果鼠标位于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将位于顶部。

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

Answer 3

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

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

handle是否包含元素列表？如果是这样，请仔细查看Document对象frameContent - 是否为"about:blank"？这只是一个预感，但如果你得到这些输出，它可能在帧内容加载之前（即在#handle元素存在之前）执行jQuery选择器。

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

IFrame中的jQuery Draggable Handler

3 个答案: