Как объединить два списка с возможностью перетаскивания, удаления и сортировки?

У меня есть два списка. В начале только первый список имеет видимые элементы, второй список начинается только с одного скрытого элемента. Когда я перетаскиваю, я ищу пустой список, чтобы найти, есть ли только один элемент и скрыт ли он с помощью CSS. Если это так, я удаляю элемент из исходного списка и добавляю его во второй. Также мне нужно, чтобы второй список можно было сортировать, но на данный момент с кодом, показанным ниже, он не работает.

$(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();
});

Кто-нибудь может что-нибудь предложить?