jQuery Nested Sortable - 在所有可用的 UL 中移动 LI 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1188153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Nested Sortable - Move LI elements within all available UL's
提问by Jon
I have the following code which works although it runs quite slowly I feel. What I want to do is allow <li>'s to be moved freely under existing <ul>'s or move them up a level. I also want to be able to create hierarchies so if you dragged a <li>under another <li>that would create a hierarchy. I think in that sense I would have to render a <ul>under each <li>just in case. I only want to limit it to 2 or 3 levels deep.
我有以下代码虽然我觉得它运行得很慢但它可以工作。我想要做的是允许<li>'s 在现有<ul>'s下自由移动或将它们向上移动一个级别。我还希望能够创建层次结构，因此如果您将一个拖到<li>另一个<li>会创建层次结构的下方。我认为从这个意义上说，为了以防万一，我必须<ul>在 each<li>下渲染一个。我只想将其限制为 2 或 3 级深。
$("#sort_list").sortable({
containment: 'parent',
axis: 'y',
revert: true,
opacity: 0.8
});
$(".sub_list").sortable({
containment: 'parent',
axis: 'y',
revert: true,
opacity: 0.8,
});
$("#sort_list").disableSelection();
<ul id="sort_list">
<li>one</li>
<li>two
<ul class="sub_list">
<li>sub one</li>
<li>sub two</li>
</ul>
</li>
<li>three</li>
<li>four</li>
</ul>
回答by gorn
Excellent answer to this is
对此的出色回答是
https://github.com/ilikenwf/nestedSortable
https://github.com/ilikenwf/nestedSortable
i am glad that I have found it. jstree was too heavyweight for me.
我很高兴我找到了它。jstree 对我来说太重量级了。
回答by Benjamin Piette
A "nestable" jquery plugin. Perfect for what I'm trying to do:
一个“嵌套的”jquery 插件。非常适合我正在尝试做的事情：
http://dbushell.com/2012/06/17/nestable-jquery-plugin/
http://dbushell.com/2012/06/17/nestable-jquery-plugin/
回答by lepe
I have used JQuery Interface pluginwhich was easy to setup and worked pretty well for that task (check the demo), but I wanted something lighter and which do not require additional plugins.
我使用了JQuery 接口插件，它易于设置并且非常适合该任务（查看演示），但我想要更轻巧的并且不需要额外插件的东西。
Even JQuery UI library's sortable is kind of rudimentary you can still achieve somehow that functionality:
即使 JQuery UI 库的 sortable 是一种基本的，你仍然可以以某种方式实现该功能：
$("ul").sortable({
items: '> li',
axis: 'y',
update: function (e, ui) {
...
}
This will let you sort "li" under any "ul" (if I can remember correctly). However it will not let you move "li" elements from one "ul" to another "ul". Even it is possible to do it (changing the configuration), I found it not so stable and somehow cumbersome.
这将使您可以在任何“ul”下对“li”进行排序（如果我没记错的话）。但是，它不会让您将“li”元素从一个“ul”移动到另一个“ul”。即使可以做到（更改配置），我发现它不是那么稳定，而且有些麻烦。
I came up with a simple solution: a "flag button", which deactivate sorting and activate moving... and it works like a charm! All you have to do is to keep track the "li" parent id before and after moving it.
我想出了一个简单的解决方案：一个“标记按钮”，它可以停用排序并激活移动……它的作用就像一个魅力！您所要做的就是在移动它之前和之后跟踪“li”父 ID。
My 5 cents.
我的5美分。
回答by Christopher Tokar
Most likely the jQuery UI library's sortable functionality isn't that configurable (it's very rudimentary, meant for sorting lists one level deep). You'd be better off simply using one of the tree plug-ins that support drag and drop.
很可能 jQuery UI 库的可排序功能不是那么可配置的（它非常初级，用于对列表进行一级深度排序）。您最好只使用支持拖放的树插件之一。
The jQuery UI tree widget is in development, but you can use one of the following plugins:
jQuery UI 树小部件正在开发中，但您可以使用以下插件之一：
http://abeautifulsite.net/notebook/58
http://abeautifulsite.net/notebook/58
http://news.kg/wp-content/uploads/tree/
http://news.kg/wp-content/uploads/tree/
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
