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