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

Question

我有下面的代碼，雖然它的運行速度非常慢，但我覺得。我想要做的就是允許<li>在現有的<ul>之下自由移動或者將它們移動到一個水平。我還希望能夠創建層次結構，因此如果您將<li>拖動到另一個<li>之下以創建層次結構。我認爲在這種意義上，爲了以防萬一，我將不得不在每個<li>下呈現<ul>。我只想把它限制在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用戶界面庫的排序功能是不是配置（這是很基本的，意味着排序列表深一個層次）。只需使用一個支持拖放的樹插件即可。

的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/

Answer 3

我已經使用JQuery Interface plugin哪一個很容易設置和完成這項任務（檢查demo），但我想要更輕，不需要額外的插件。

即使JQuery用戶界面庫的排序是一種基本的，你仍然可以實現某種程度上該功能：

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

這將讓你在任何「UL」（如果我能記錯的話）一種「禮」。但是它不會讓你將「li」元素從一個「ul」移動到另一個「ul」。即使它可以做到（改變配置），我發現它不那麼穩定，而且很麻煩。

我想出了一個簡單的解決方案：一個「標誌按鈕」，它禁用排序和激活移動...，它就像一個魅力！你所要做的就是在移動之前和之後跟蹤「李」父母身份。

我的5美分。

Answer 4

一個「可嵌套」的jquery插件。完美的我想要做的事：

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