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

i'm trying rearrange items of 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 click button of first list element y expect:

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

but 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 effect want achieve. purpose of 'button'? move up? move top? move bottom?

here's example of fx.sort use sends row (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 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 ideas. serialize function can allow set custom order want , / or save order after.