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 bee 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:

The demo is at: /

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.

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 bee 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./t/Ls2ksVY4Q

The demo is at: http://jsfiddle/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.

• javascript
• jquery
• jquery-ui
• drag-and-drop

• That demo is kinda neat. No idea what it's for, but it's fun to play around with. :) You should post your code here as well, at least the relevant parts. – deceze ♦ Commented Feb 23, 2011 at 1:09
• Thanks! It's going to be used for creating BOM's. The dark boxes are starting points, and an engineer will then be able to drag out various parts to create different circuits. – ifightcrime Commented Feb 23, 2011 at 1:25
• it seems like it for a brief moment looses track of the right .part-holder very strange indeed. wonder if you could update the grid somehow each time you have sortet the big black squares? – Tokimon Commented Feb 25, 2011 at 11:03

3 Answers 3

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.

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

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