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插件,它易于设置并且非常适合该任务(检查演示),但我想要更轻的东西,不需要额外的插件.

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

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

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

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

我的5美分.