Question

我想对多个和多级无序列表进行排序。

一个例子：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script>
        $(function() {
            $( ".connectedSortable" ).sortable({
                connectWith: ".connectedSortable"
            }).disableSelection();
        });
    </script>
</head>
<body>
<div id="list">
    <ul id="list1" class="connectedSortable">
        <li title='1'>Foo1</li>
        <li title='2'>Foo2
            <ul id="list3" class="connectedSortable">
                <li title='3'>FooBar1</li>
                <li title='4'>FooBar2</li>
                <li title='5'>FooBar3</li>
                <li title='6'>FooBar4</li>
            </ul>
        </li>
        <li title='7'>Foo3</li>
        <li title='8'>Foo4</li>
        <li title='9'>Foo5</li>
        <li title='10'>Foo6</li>
        <li title='11'>Foo7</li>
    </ul>
    <ul id="list2" class="connectedSortable">
        <li title='12'>Bar1</li>
        <li title='13'>Bar2</li>
        <li title='14'>Bar3</li>
    </ul>
</div>
</body>
</html>

当我对列表项进行排序时，我还需要两个可以访问的信息：父元素的id - 存储在父元素标题上（如果不具有父元素，则为0）和列表的id（像list1和list2 - 不是list3）。你会如何实现这个？欢迎任何信息。

PS：我是UI的新手。

Answer 1

在这里，我用解决方案制作了jsfiddle。主要思想是使用containment的{{1}}属性来告诉每个列表保持在自身内部。

JQuery UI：在多个无序列表之间移动列表项

1 个答案: