JQuery UI 可排序部分 (div)，内部有可排序列表

Question

我希望有人能给我指出一个教程/示例。我确信它已经完成了，我只是没有找到它。我需要一个“嵌套”排序功能，其中有代表部分或类别的可排序 block (可能是 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

这将帮助您将项目从一个列表转移到另一个列表。我想说你有正确的想法，创建一个“外部”可排序，它使用 div，其中包含另一个带有“可转移”项目的可排序列表。