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

【问题标题】：JQuery UI: moving list items between multiple unordered listsJQuery UI：在多个无序列表之间移动列表项
【发布时间】：2012-02-14 19:55:15
【问题描述】：

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

一个例子：

<!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 方面的新手。

【问题讨论】：

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

在这里，我用解决方案做了一个jsfiddle。主要思想是使用containment 的sortable 属性来告诉每个列表保留在其自身内。

【讨论】：