removing element from mootools sortable

Question

I'm trying to remove an item from a mootools sortable list, then serialize and save the new list.

I'd like to use a little bit of eye-candy rather than a straight destroy() on the element. I've built a fiddle here: http://jsfiddle.net/kBAqJ/4/

Note the order1 and order2 vars. This holds the serialized element before and after removing the item. If you use the destroy method to get rid of the element after removing it from the sortable, you get the right value for order2, eg. 4.

If you use nix(true) instead of destroy, you get 5 as the value of order1 and order2, even though the docs say that nix(true) calls destroy after dissolve.

Is this a bug in Mootools, or am I missing something? Is there a different way to add a dissolve effect while still using destroy that will get the right result?

window.addEvent('domready', function(){

    var mySort = new Sortables('#example2 UL', {
        clone: true,
        revert: true,
        opacity: 0.7
    });

    console.log (mySort.elements.length);
    var order1 = mySort.serialize(0);
    console.dir(order1);

    mySort.removeItems($('item1')).destroy(); // this results in the correct value in the order2 var below
    //mySort.removeItems($('item1')).nix({duration: 1000}, true); // this results in the wrong value for order2

    console.log (mySort.elements.length);
    var order2 = mySort.serialize(0);
    console.dir(order2);

});

Answer 1

i don't think you'll find any effect or way which will destroy the element and still show it on the page ;) So it is not a moo tools bug

The serialize function is using the children of the list (ie. the <li> blocks) to make the array.

I would say the easiest way would be to get rid of their reference in the serialized array:

window.addEvent('domready', function(){

    var mySort = new Sortables('#example2 UL', {
        clone: true,
        revert: true,
        opacity: 0.7
    });

    console.log (mySort.elements.length);
    var order1 = mySort.serialize(0);
    console.dir(order1);

    //mySort.removeItems($('item1')).destroy(); // this results in the correct value in the order2 var below
    mySort.removeItems($('item1')).nix({duration: 1000}, true); // this results in the wrong value for order2

    console.log (mySort.elements.length);
    var order2 = mySort.serialize(0).erase("item1"); // we have to erase the item because he may still be in the list of children at this time…
    console.dir(order2);

});

Cheers