如何用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> 

它應該給你一些想法。你還可以做的是一個序列化函數，它可以讓你設置你想要的任何自定義訂單和/或保存訂單。