How to debug a jQuery nested sortable draggable element?

Question

The first part allows you to first drag an element into a sortable div, which is working fine. I then want to have that div become sortable as well so I can drag new elements (parts) into those.

That part works fine too, except sometimes if you reorder the elements (the darker ones) it wont let you put a part back into it until you either reorder them again, or try and put it in one of the other elements and go back to it.

It's kind of hard to explain, but here's a screen-cast: http://screencast.com/t/Ls2ksVY4Q

The demo is at: http://jsfiddle.net/9MXWp/

Here's the relevant code:

$(document).ready(function() {
    $('#the-grid').sortable({
        tolerance: 'pointer',
        update: function(event, ui) {
            if( $(ui.item).has('.close').length == 0 ) {
                $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
            }

            $('.part-holder', ui.item).sortable({ 
                tolerance: 'pointer',
                update: function(event, ui) {
                    if( $(ui.item).has('.close').length == 0 )
                        $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
                } 
            }); 

        }
    });

    $('#sidebar > ul > li.part').draggable({
        helper: 'clone',
        connectToSortable: '.part-holder',
        addClasses: false
    }); 

    $('.drag-element').draggable({
        revert: 'invalid',
        helper: 'clone',
        connectToSortable: '#the-grid',
        addClasses: false
    });

    $('#update-list').click(updateList);
});

---

Recipe that seems to duplicate the problem (in FF 3.6):

1. Drag Element 1 to the staging area.

2. Drag Element 2 to the staging area; place it before element 1.

3. Drag a Part inside Element 1.   ☞ Sometimes the page will fail right here. ☜ ☣

4. Drag a Part inside Element 2.

5. Now drag Element 2 to be after Element 1.

6. ☞ Drag a Part inside Element 1; it won't work. ☜ ☣

7. Drag a Part inside Element 2; it will work, and now Element 1 accepts parts again.

Answer 1

I agree with Nick P in that I think it's a bug in sortable. The other items being sorted lose the sort-ability when sorting finishes.

I added

$('.part-holder').sortable('refresh');

before

$('.part-holder', ui.item).sortable({

which worked for me in Chrome 11, FF3.7 and FF4.0b12pre.