How to rearrange the items of a list and the DOM with MooTools?

I'm trying to r开发者_运维百科earrange the items of a list:

<ul>
<li>1 <button><li>
<li>2 <button><li>
<li>3 <button><li>
<li>4 <button><li>
</ul>

using MooTools:

document.getElements('button').addEvent('click', function() {
    var toSort = new Fx.Sort(this.getParent(),this.getParent().getNext());
    toSort.swap();
    toSort = toSort.rearrangeDOM();
}

When I click the button of the first list element y expect:

<ul>
<li>2 <button><li>
<li>1 <button><li>
<li>3 <button><li>
<li>4 <button><li>
</ul>

but I get:

<ul>
<li>2 <button><li>
<li>3 <button><li>
<li>4 <button><li>
<li>1 <button><li>
</ul>

What I'm doing wrong?

Thanks in advance

depends what the effect is that you want to achieve. what is the purpose of 'button'? move up? move to top? move to bottom?

here's an example of a Fx.Sort use that sends a row up (if not first already)

http://jsfiddle.net/dimitar/ZQhgF/

var sort = new Fx.Sort($$("ul li"), {
    transition: Fx.Transitions.linear.easeInOut,
    link: "chain",
    duration: 500,
    mode: "vertical",
    onComplete: function() {
        this.rearrangeDOM();
    }
});

document.getElements('button').addEvent('click', function(e) {
    e.stop();
    var el = this.getParent(), prev = el.getPrevious();
    if (!prev)
        return;
    sort.swap(el, prev);
});

which works on this dom:

<ul id="sorter">
    <li>1 <button>up</button></li>
    <li>2 <button>up</button></li>
    <li>3 <button>up</button></li>
    <li>4 <button>up</button></li>
</ul>

it should give you some ideas. what you could also do is a serialize function that can allow you to set any custom order you want and / or save the order after.