jQuery Draggable обработчик внутри IFrame - PullRequest
Новая
       11

jQuery Draggable обработчик внутри IFrame

6 голосов
/ 06 августа 2010

Что за глоток.

В основном у меня есть родитель <div> и внутри него <iframe>.Мне нужен элемент внутри iframe, чтобы быть ручкой для перетаскивания родительского div.Это вообще возможно?

Я пробовал: 

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

Он нацелен на нужный элемент DOM, но он просто не будет перетаскиваться.Может быть возможно наложить скрытый div поверх iframe, но я обнаружил, что iframe переносит событие над div, когда позиция абсолютна.Странно.

Ответы [ 3 ]

8 голосов
/ 17 ноября 2010

попробуйте

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

это должно работать

6 голосов
/ 13 августа 2010

Я решил попробовать и это, мальчик, это большая работа с небольшим прогрессом, использующая внутренний узел 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, а не к основному документу. Обходной путь должен иметь событие перемещения на документе и захватить положение мыши оттуда. Проблема, опять же, заключается в том, что если мышь находится внутри 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;
});

Второе решение - это способ, который вы упомянули, иметь абсолютное позиционирование div над самим iframe. У меня нет проблем с размещением 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 отключен. Если вы объявите свой div перед iframe и не указали z-index, тогда iframe будет сверху.

Какой бы путь вы ни выбрали, удачи!

0 голосов
/ 09 августа 2010

что происходит, когда вы делаете это (с активированным firebug ): 

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

Содержит ли handle список элементов?И если это так, внимательно посмотрите на объект Document, который frameContent - это URL "about:blank"?Это просто догадка, но если вы получите эти выходные данные, вероятно, он выполняет селектор jQuery до загрузки содержимого кадра (т. Е. До того, как существует элемент #handle).В этом случае вы можете добавить событие в документ IFRAME и связаться с родительским фреймом через window.parent.

...