内置可排序列表的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，在他们，包含另一个可转移的项目排序列表。