JQuery UI：在多个无序列表之间移动列表项
我想对多个和多级无序列表进行排序。
举个例子：
<!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（像列表 1 和列表 2 - 不是列表 3）。 你会如何实施这个？ 欢迎任何信息。
PS：我对 UI 很陌生。
I want to sort multiple and multilevel unordered lists.
An example:
<!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>
I need also two informations to be accessible at the time when I sort the list items: an id of the parent element - stored on the parent elements title (0 if doesnt has a parent element) and the id of the list (like list1 and list2 - not list3).
How would you implement this?
Any information is welcome.
PS: I am quite new in UI.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在这里，我用解决方案制作了 jsfiddle 。主要思想是使用
sortable的containment属性来告诉每个列表保留在其自身内。Here, I made a jsfiddle with the solution. The main idea is to use the
containmentproperty forsortableto tell every list to remain within itself.