jQuery: nested sortables

As I said in my last post, I was pretty sure that the code in my last chapter was correct and that the problem was with jQuery’s Sortable itself.

I spent the last few hours studying the Sortable code and think I’ve fixed it.

Here’s the example from last post showing the problem, and here’s the corrected version.

If you want to patch your own copy of Sortable, here’s my patch file.

I think there’s actually a moral here – if you want to make sure that something is fixed, then you should knuckle down and do it yourself, as the jQuery developers really do have better things to be doing.

Buy the book! jQuery 1.3 with PHP

8 Replies to “jQuery: nested sortables”

  1. I’ve downloaded the latest ui.core and ui.sortable from the SVN trunk and it does work although its very jumpy. Your mod was added to the ui.sortable in the trunk.

  2. Just an update on what I am trying to achieve.

    I am using the sortable nested options to allow users to define menus in a CMS.

    On the left they will have a unordered non-nested list of items.

    On the right they will have a unordered nested list that represents the menu heirarchy.

    I have got a rough thing working by alterning your sorting-trees.js to ‘connectwith’ the left list.

    However I will need to append a ul to each item that has been moved from the left to right list so it can be nested and have children. I have tried this but to no avail. Obviously if they move from right to left it will have to remove the sub-ul’s.

    Hope you can help, feel free to email me.

  3. I think I have it working but need your expert eye.

    $(document).ready(function(){
    $(‘#menu_items li’).each(function(){
    if($(‘ul’,this).length)return;
    $(”).appendTo(this);
    });
    $(‘#menu_items,#menu_items ul, #left’).sortable({
    ‘connectWith’:[‘#menu_items,#menu_items ul, #left’],
    ‘tolerance’:’pointer’,
    ‘placeholder’:’placeholder’,
    ‘cursor’:’pointer’,
    ‘items’:’li’,
    stop: function(event,ui) { test(event,ui); }
    })
    .disableSelection();
    });

    function test(event,ui)
    {
    $(‘#menu_items li’).each(function(){
    if($(‘ul’,this).length)return;
    $(”).appendTo(this);
    });

    $(‘#left li’).each(function(){
    if($(‘ul’,this).length){
    $(this).children().remove();
    }
    });

    $(‘#menu_items,#menu_items ul, #left’).sortable({
    ‘connectWith’:[‘#menu_items,#menu_items ul, #left’],
    ‘tolerance’:’pointer’,
    ‘placeholder’:’placeholder’,
    ‘cursor’:’pointer’,
    ‘items’:’li’,
    stop: function(event,ui) { test(event,ui); }
    })
    .disableSelection();

    }

  4. IE6 retains absolute positioning for an item after the sort operation stops, add this code to the init argument object to reset positioning to static (and have IE6 render the sortable correctly):

    'beforeStop': function (event, ui) {ui.item.css('position','static');}

  5. Hello, I’m interested in seeing your patch but the links are dead in the post. Any way you can relink to the patch?

    Thanks

Leave a Reply