How to combine two lists with draggable, droppable and sortable?

I开发者_如何学C have two lists. At start only the first one has visible elements, the second list starts with only one hidden element. When I drag, I search empty list to find if there is only one element and if it's hidden through CSS. If so, I remove the element from the source list and add it to the second one. Also I need second list to be sortable, but at the moment with the code shown below it doesn't work.

$(function(){
    $( '.draggable_base_menu_item' ).draggable( {
        containment: '#submenu',
        stack: '#submenu ul li',
        cursor: 'move',
        revert: false,
        connectToSortable: '.droppable_menu_item_area'
    } );

    $( '.droppable_menu_item_area' ).sortable( {
        tolerance: 'pointer',
        items: 'li',
        receive: function( event, ui )
        {
            $(ui.draggable).appendTo( this );
        }
    } ).disableSelection();
});

Can anyone suggest anything?

Sortables are already draggables. Use sortables with connected lists:

http://jqueryui.com/sortable/#connect-lists