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

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

具有可排序列表内部的JQuery UI可排序部分（div）

1 个答案: