0

我有以下带有 Jquery 排序的 html 代码

<div class="sortable" style='width:700px; margin: 0 auto; border:2px solid; border-color:grey;'>
    <a href='#' class='expand'> Group 1</a>
<ul style="display:none" class="sortable" >
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
</ul>

<a href='#' class='expand'> Group 2</a>
<ul style="display:none" class="sortable">
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
</ul>
</div>

查询......

<script>
    $(function() {
        $( ".sortable" ).sortable();
        $( ".sortable" ).disableSelection();
    });
</script>
<script>
$(document).ready(function() {
    $('.expand').click(function() {
        $(this).next().toggle('slow', function() {
        });
    });
});

</script>

ul 内的列表是可排序的，整个 aer 上的 div 内的 uls 也是可排序的。问题是当我将一个项目从一个组移动到另一个时，如果我将该项目放在该组的项目之间，它会添加到 ul 中，但如果我将它放在组的底部或组的正下方，那么它是放置在 ul 之外。

编辑

现在我可以对每个 ul 中的列表进行排序，但我不能对整个 ul 进行排序，也不能将一个项目从一个组移动到另一个组

谁能帮我？谢谢

在 JSFiddle 上

4

1 回答 1

0

你的脚本快疯了，因为你有一堆具有相同 id 的项目sortable- 每个元素只使用一个 id，多个元素可以共享同一个类。例子...

<script type="text/javascript">
    $(function() {
        $(".patents").sortable();
        $(".patents").disableSelection();
    });
</script>

<div id="sortWrap">

    <a href="#" class="expand">Group 1</a>
    <ul style="display: none;" id="ulOne" class="patents">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
    </ul>

    <a href="#" class="expand">Group 2</a>
    <ul style="display: none;" id="ulTwo" class="patents">
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
    </ul>

</div>

除了您的语法错误之外，您尝试做的事情并不容易单独使用 Sortable 完成。你会希望这个扩展能够重新排列嵌套列表：https ://github.com/mjsarfatti/nestedSortable

于 2012-06-26T20:47:21.843 回答