jQuery UI сортируемый и диалог

Question

Можно ли перетаскивать сортируемые элементы списка jQuery UI между двумя списками, один из которых находится в диалоге jQuery UI, а другой - нет?

Я пытаюсь создать диалог, в котором пользователи могут перетаскивать поля формы из диалога в форму, находящуюся на странице, но я не могу перетащить элементы за границу диалога.

Заранее спасибо

Редактировать

Кажется, что перетаскивание действительно работает, но вы не можете видеть элемент, когда выходите за рамки диалога. Это не совсем идеально. (см. демо redsquare )

Другое Редактирование

Основной div, который создается для диалога, имеет overflow:hidden. Если я отключу это в Firebug, перетаскивание будет работать должным образом, поэтому я думаю, что смогу как-то переопределить это, но подозреваю, что это вызовет у меня больше проблем.

Answer 1

Демо здесь .

Это повторяет вашу проблему? Я могу перетаскивать их между собой, однако вы теряете помощника, когда вы перетаскиваете из или в диалог. Я думаю, что может потребоваться настроить z-индексирование, когда вы выходите из диалогового окна или входите в него, но оно все еще работает ... просто!

Я попытаюсь разобрать это, когда у меня будет немного больше времени.

ОБНОВЛЕНИЕ: помогает настройка z-index (хорошо помогает перетаскивание из списка в диалог - в первый раз!) ... улучшит его позже! см здесь

НОВОЕ ОБНОВЛЕНИЕ Новая демонстрация здесь, я должен был использовать помощника, чтобы гарантировать, что z-индекс остался правильным. Работает сейчас здесь

Answer 2

У меня была похожая проблема с сортировкой элементов между диалогами, так что спасибо redsquare за код. Удалось немного упростить код до этого отдельного бита (дополнительная разметка не требуется):

this.sortables = $( sortSelector ).sortable( {
    connectWith: sortSelector,
    zIndex : 99999,
    helper: function() {
        var helper = $( '.sortHelper li' );
        if ( !helper.length ) {
            helper = $('<ul><li></li></ul>')
                .addClass( 'sortHelper' )
                .appendTo( 'body' )
                .find( 'li' )
                .css( { 'z-index': 9999 } );
        }

        return helper;
    },
    start: function( event, ui ) {
        ui.helper.text( ui.item.text() );
    }
});

Демо на это jsfiddle .