jQuery嵌套可排序 - 在所有可用的UL中移动LI元素

Question

我有以下代码，虽然它运行速度很慢我觉得有效。我想要做的是允许<li>在现有<ul>下自由移动，或者将它们向上移动一级。我还希望能够创建层次结构，以便在另一个<li>下拖动<li>来创建层次结构。我认为从这个意义上讲，我必须在每个<ul>下呈现<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>

Answer 1

对此的优秀答案是

https://github.com/ilikenwf/nestedSortable

我很高兴我找到了它。 jstree对我来说太重了。

Answer 2

“可嵌套”jquery插件。适合我正在尝试做的事情：

http://dbushell.com/2012/06/17/nestable-jquery-plugin/

Answer 3

我使用了JQuery Interface plugin，它很容易设置，并且可以很好地完成该任务（请查看demo），但我想要更轻松的东西，而且不需要额外的插件。

即使是JQuery UI库的可排序也是一种基本的，你仍然可以实现某种功能：

$("ul").sortable({
items:  '> li',
axis: 'y',
update: function (e, ui) {
    ...
}

这会让你在任何“ul”下排序“li”（如果我能记得的话）。但是它不会让你将“li”元素从一个“ul”移动到另一个“ul”。即使它可以做到（改变配置），我发现它不那么稳定，并且有点麻烦。

我想出了一个简单的解决方案：一个“标志按钮”，它可以停用排序并激活移动...它就像一个魅力！您所要做的就是在移动之前和之后跟踪“li”父ID。

我5美分。

Answer 4

jQuery UI库的可排序功能很可能不是可配置的（它非常简陋，意味着对一个级别的列表进行排序）。你最好只使用一个支持拖放的树插件。

jQuery UI树小部件是in development，但您可以使用以下插件之一：

http://www.jstree.com/

http://abeautifulsite.net/notebook/58

http://news.kg/wp-content/uploads/tree/

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/