如何用MooTools重新排列列表项和DOM的项目？

Question

我试图重新排列列表中的项目：

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

使用MooTools的：

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

当我点击第一个列表元素的按钮Ÿ预计：

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

但我得到：

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

我做错了什么？

在此先感谢

Answer 1

取决于您想达到的效果。 '按钮'的目的是什么？提升？移动到顶部？移动到底部？

这里有一个Fx.Sort使用发送一排起来的例子（如果不是第一个的话）

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); 
}); 

这对这个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> 

它应该给你一些想法。你还可以做的是一个序列化函数，它可以让你设置你想要的任何自定义订单和/或保存订单。