3

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

1 回答 1

4

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

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

于 2013-04-11T18:13:15.880 回答