how can I drag nested UL's in jQuery's UI?

Question

I have the following setup:

<ul class='_lscolumn'>
    <li>column1
        <ul class='_lswindow'>
            <li>window1
                <ul class='_lslink'>
                    <li>link1</li>
                    <li>link2</li>
                </ul>
            </li>
            <li>window2</li>
            <li>window3
                <ul class='_lslink'>
                    <li>link3</li>
                    <li>link4</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>column2
        <ul class='_lswindow'>
            <li>window4</li>
        </ul>
    </li>
    <li>column3
        <ul class='_lswindow'>
            <li>window5</li>
            <li>window6</li>
        </ul>
    </li>
</ul>

What I want with this is be able to drag links to window classes, and windows to columns. Eventually I will add a tab, windows will need to be able to dragged to tabs as well. I'm trying to this using UI. I have a sample set up at www.linkshelf.com/jQuery/index.html. The window dragging works the way I want, but when I start to drag links the layout gets all wrong. Anybody knows what I'm doing wrong here, and what I need to do to be able to drag nested UL's?

If I make the columns sortable by adding $('_column').sortable(); the columns sort the way they should, but the windows and the links go bezerk...

Answer 1

I worked on a JSFiddle for this, and what I found is that it can work as long as the target exists to drag to...

http://jsfiddle.net/gfosco/fJVMk/

See how this works, you can move the links around and they won't get out of order with the windows...

I added the UL and updated the class to have a min-height, otherwise there's nowhere to drop the links.

JS:

$('._lswindow').each( function() {
    $(this).sortable( {
        connectWith: '._lswindow',
        cancel: '._lslink'
    }).disableSelection();
});

$('._lslink').each( function() {
    $(this).sortable( {
        connectWith: '._lslink' }).disableSelection();
});

CSS addition:

._lslink {
 min-height:20px;   
}

HTML snippet of one window with empty link container:

    <ul class='_lswindow'> 
        <li>window4
            <ul class='_lslink'></ul>
        </li> 
    </ul>