如何使用MooTools的Sortable插件來包含DOM元素的所有子元素？

Question

我使用mootools-more.1817.js ...這是我的HTML結構：

<ul id="categories"> 
    <div id="admin">Admin Controls</div> 
    <li class="selected"><a href="#">Test</a> 
     <ul> 
     </ul> 
    </li> 
    <div id="admin">Admin Controls</div> 
    <li><a href="#">Test 2</a> 
     <ul> 
     </ul> 
    </li> 
    <div id="admin">Admin Controls</div> 
    <li><a href="#">Top Links</a> 
     <ul> 
      <li id="article"><a href="/1">Link 1</a></li> 
      <li id="article"><a href="/3">Link 2</a></li> 
      <li id="article"><a href="/2">Link 3</a></li> 
      <li id="article"><a href="/4">Link 4</a></li> 
     </ul> 
    </li> 
    <div id="admin">Admin Controls</div> 
    <li><a href="#">Lame Links</a> 
     <ul> 
      <li id="article"><a href="/9">Link 9</a></li> 
      <li id="article"><a href="/10">Link 10</a></li> 
     </ul> 
    </li> 
    <div id="admin">Admin Controls</div> 
    <li><a href="#">Awesome Links</a> 
     <ul> 
      <li id="article"><a href="/11">Link 11</a></li> 
      <li id="article"><a href="/12">Link 12</a></li> 
     </ul> 
    </li> 
</ul> 

所以我希望做兩件事情：

1. 能夠將每個li項目拖放到另一個部分，並將它帶它的所有孩子。例如。如果我拖動鏈接爲Top Links的li，則不僅要拖動Top Links，而且還要拖動li的子項div#admin，ul和li。基本上每個li的所有孩子。
2. 我也想能夠在孩子列表之間拖動項目。例如，假設我想將鏈接Link 2從ul拖動到Awesome Links部分，並將其放在鏈接Link 11和Link 12之間。

我已經這樣做了：

window.addEvent('domready', function(){ 
    new Sortables('#categories', { 
     clone: true, 
     revert: true, 
     opacity: 0.7 
    }); 
}); 

什麼，做只是拖動li，而不是li的孩子。

我該如何實現這些目標？

謝謝。

Answer 1

首先，如果您的categories列表中有div項不在li標籤中，您將擁有無效的HTML。只有直接到ul的孩子可以使用li作爲有效列表。

其次，根據文檔，「要啓用列表之間的排序，必須使用數組或選擇器傳遞一個或多個列表或標識符」（http://mootools.net/docs/more/Drag/Sortables ）。這意味着，要在您的子列表之間移動項目，必須將每個ul傳遞到可排序組（不同於類別組）。這應該解決你的問題＃2。

我還不確定爲什麼它不會拖動整個li的內容，儘管它可能是無效的HTML導致的問題。