JQuery UI Sort and Dialog

Question

Is it possible to drag jQuery UI Sortable list items between two lists, one of which is in the JQuery UI dialog box, and the other is not?

I am trying to create a dialog in which users can drag and drop form fields from the dialog into the form that is on the page, but I cannot drag elements from the border of the dialog.

Thank you in advance

Edit

Dragging and dropping seems to actually work, but you don't see the element as soon as you go beyond the scope of the dialog. This is not an ideal option. (see redsquare demo )

Other Editing

The main div created for the dialog has overflow:hidden. If I disable this in Firebug, the drag and drop works correctly, so I think I could somehow override this, but I suspect that this will cause me more problems.

Answer 1

Demo is here .

Does this repeat your problem? I can drag between them, however you lose the helper when you drag or into the dialog. I think you might have to adjust z-indexing when you exit from or in a dialog box, but it still functions ... simple!

I will try to sort this out when I have more time later.

UPDATE: z-index ( - !)... ! .

, , , z-index .

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.