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.

Answer 2

seems you've uncovered a bug in sortable... a potential workaround is to recreate the '.part-holder' sortable whenever it's re-ordered...

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

put that right above

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

it's a hack, but hey it works... :)

Answer 3

ok lets try this again; i added a 'connectWith' option, then wrapped the '.part-holder' sortable initializer so it doesn't get updated every time the grid is re-ordered...

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

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

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

function updateList()
{
    $('#current-list').empty();

    $('#the-grid > li').each( function(index, value) {
            $('#current-list').append('<li>' + $(value).html() + '<\/li>');
    });
}

with those changes, you are able to add the 'parts' to the 'part-holders'! I did see some intermittent js errors... I have no idea why they appear, but they don't seem to interfere with the operation of the page when viewed with FF 3.6