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

Question

I'm trying to rearrange 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

Answer 1

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.