Question

我有以下带有Jquery Sorting的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>

的JQuery ......

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

</script>

ul里面的列表是可排序的，整个过程中div内的uls也是可排序的。问题是当我将一个项目从一个组移动到另一个组时，如果我将该项目放在该组的项目之间，则将其添加到ul中，但如果我将其放在组的底部或者只是在组的下方，那么它就是放在ul。

之外

修改

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

任何人都可以帮助我吗？感谢

On JSFiddle

Answer 1

你的脚本很疯狂，因为你有一堆具有相同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

JQuery排序小问题

1 个答案: