內置可排序列表的JQuery UI可排序部分（div）

Question

我希望有人能夠指點我一個教程/示例。我確信它已經完成了，我只是沒有找到它。我需要一個「嵌套的」排序功能，其中有可以排序的塊（可能是div）代表段或類別。

然後在部分區域內我需要一個也可排序的列表。

因此，例如說我有以下幾個部分：

Breakfast 
    - Cereal 
    - Coffee 
    - Juice 

Lunch 
    - Soup 
    - Sandwich 

Dinner 
    - Stew 

我希望能夠拖動並重新訂購的早餐，午餐和晚餐，並與它的子列表中移動。然後，我希望能夠在任何地方對子列表進行排序。爲了澄清我希望能夠將咖啡從早餐區移動到晚餐區，如果我想。

請謝謝你的幫助。

---

好吧，我只是使用了錯誤的選擇器，它沒有按預期工作。默認情況下，JQuery UI正是我所需要的。下載我的代碼給任何絆倒在此的人。

<div id='section-block'> 
    <div> 
     <span>Section 1</span> 
     <ul id="sortable1" class="connectedSortable"> 
      <li class="ui-state-default">Item 1a</li> 
      <li class="ui-state-default">Item 2a</li> 
      <li class="ui-state-default">Item 3a</li> 
      <li class="ui-state-default">Item 4a</li> 
      <li class="ui-state-default">Item 5a</li> 
     </ul> 
    </div> 
    <div> 
     <span>Section 2</span> 
     <ul id="sortable2" class="connectedSortable"> 
      <li class="ui-state-highlight">Item 1b</li> 
      <li class="ui-state-highlight">Item 2b</li> 
      <li class="ui-state-highlight">Item 3b</li> 
      <li class="ui-state-highlight">Item 4b</li> 
      <li class="ui-state-highlight">Item 5b</li> 
     </ul> 
    </div> 
</div> 


<script type="text/javascript"> 
    $(function() { 
     $("#section-block").sortable().disableSelection(); 

     $("#sortable1, #sortable2").sortable({ 
      connectWith: ".connectedSortable" 
     }).disableSelection(); 
    }); 
</script> 

Answer 1

http://jqueryui.com/sortable/#connect-lists

這將幫助你從一個列表項目轉移到另一個。我會說你有正確的想法，做一個「外部」可排序的使用divs，在他們，包含另一個可轉移的項目排序列表。