How to make jQuery UI sortable with nested dropdown menu work?

问题

I've read everything similar to my problem posted here but not found any solution.

I have created a menu with sub menu entries inside dropdowns. All menu entries are sortable to all menu levels. root menu entries to child lists and the other way.

Nearly everything works fine but sorting to the first dropdown results a bug. It is neighter not possible to sort a menu entry before the first dropdown nor to sort inside the first dropdown. By trying to sort inside the first dropdown the placeholder code spawn inside the neighbor (last) dropdown and on stop sorting the entry also is inside the last dropdown and not inside the first like it should. Sorting to the other dropdowns does not have this behavior. Maybe anybody has an idea about it?

Here is the js-fiddle: http://jsfiddle.net/dehil/Vy4pu/1/

$('ul').sortable({ //    
    connectWith: $('ul'),
    items: 'li',
    placeholder: 'pf_sortable-placeholder',
    tolerance: 'pointer',
    cursor: 'pointer',
    cursorAt: {
        top: -20
    },
    zIndex: 20000,
    placeholder: 'pf_sortable-placeholder',
})

回答1:

Nested lists are always a bit awkward with jQuery UI. Recently I found http://johnny.github.com/jquery-sortable/ which may be used to sort bootstrap navs.

See http://johnny.github.com/jquery-sortable/#bootstrap.

来源：https://stackoverflow.com/questions/15101530/how-to-make-jquery-ui-sortable-with-nested-dropdown-menu-work