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 (p

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

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

Answer 3

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... :)