Недопустимое смещение мыши для перетаскивания между кадрами + сортировка

Question

В настоящее время мы пытаемся выполнить межкадровое перетаскивание между перетаскиваемыми и сортируемыми объектами, предоставляемыми пользовательским интерфейсом jQuery. Это работает правильно сейчас. Однако при перетаскивании с родительского на дочерний фрейм смещение мыши кажется отключенным - см. Эту скрипку: http://jsfiddle.net/r5nfe/6/.

Код в родительском:

$('#my-frame').load(function () {
    $('.draggable').draggable({
        appendTo: 'body',
        helper: 'clone',
        iframeFix: true,
        revert: 'invalid',
        connectToSortable: $('#my-frame').contents().find('.sortable'),
        cursorAt: { top: 0, left: 0 } 
    });

    $('#my-frame').contents().find('.sortable').sortable({
        iframeFix: true,
        cursorAt: { top: 0, left: 0 } 
    });
});

Код в детской рамке:

var containers = $('.sortable');
containers.sortable({
    connectWith: containers,
    cursor: 'move',
    revert: true,
    cursorAt: { top: 0, left: 0 } 
});

Может кто-нибудь подскажите пожалуйста как исправить смещение мышки?

Answer 1

решение 2 обновление

Я добавил эту функцию js, потому что когда вы добавляете слишком много перетаскиваемых элементов в iframe, элементы перетаскивания могут перекрываться сортируемыми элементами, если вы прокрутите вниз

$('.draggable').on('dragstop',autoResize);


function autoResize(){
    var newheight;
    if(document.getElementById){
        newheight=document.getElementById('my-frame').contentWindow.document .body.scrollHeight;
    }
    newheight=newheight+100;
    $('#my-frame').css('height',newheight);
}

вот новый jsfiddle
обновление решения конца 2

Эта проблема, кажется, ошибка, и кто-то сделал его решение (в основном решение): прозрачное решение div

1 Моим первым решением без изменения кода могло бы быть размещение iframe перед перетаскиваемым материалом, как показано здесь, кодом:

<iframe id="my-frame" src="/VqxGf/3/show"></iframe>
<ul>
    <li class="draggable">Drag me</li>
    <li class="draggable">Drag me 2</li>
    <li class="draggable">Drag me 3</li>
</ul>

Еще одно решение, которое, кажется, работает, - поиграть со свойством style: абсолютное положение для ul, в котором содержится перетаскиваемый объект.

s, немного отступа для сортируемого материала в фрейме и, возможно, фреймбордера = 0. jsfiddle Главная страница:

<ul style="position:absolute">
    <li class="draggable">Drag me</li>
    <li class="draggable">Drag me 2</li>
    <li class="draggable">Drag me 3</li>
</ul>
<iframe frameborder="0" id="my-frame" src="/ATu6F/30/show"></iframe>

Страница iframe:

<ul id="sortable" style="margin-top:100px" class="sortable idle">
    <li>Sortable</li>
    <li>Sortable 2</li>
    <li>Sortable 3</li>
</ul>

<ul id="sortable2" class="sortable idle">
    <li>Sortable</li>
    <li>Sortable 2</li>
    <li>Sortable 3</li>
</ul>

Надеюсь это поможет.

Пожалуйста, смотрите изменения в начале этого поста

Answer 2

Я попробовал это со своей стороны. Но это не работает идеально.

Я меняю appendTo с parent.body, и cursorAt с 100 на верх.

$('#my-frame').load(function () {
$('.draggable').draggable({
    appendTo: 'parent.body',
    helper: 'clone',
    iframeFix: true,
    revert: 'invalid',
    connectToSortable: $('#my-frame').contents().find('.sortable'),
    cursorAt: { top: 100, left: 0 } 
});

$('#my-frame').contents().find('.sortable').sortable({
    iframeFix: true,
    cursorAt: { top: 0, left: 0 } 
});
});