jQuery Zagnieżdżone Sortable - Przenieś elementy LI we wszystkich dostępnych wersjach UL

Question

Mam następujący kod, który działa, chociaż działa dość wolno, czuję. Co chcę zrobić, to pozwolić na swobodne przenoszenie <li> pod istniejącymi <ul> lub przenieść je na wyższy poziom. Też chcę móc tworzyć hierarchie, więc jeśli przeciągnąłeś <li> pod innym <li>, który tworzyłby hierarchię. Myślę, że w tym sensie, na wszelki wypadek, musiałbym pod każdą pod każdym <li>. Chcę tylko ograniczyć go do 2 lub 3 poziomów głębokości.

$("#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

Doskonała odpowiedź na to

https://github.com/ilikenwf/nestedSortable

Cieszę się, że znalazłem go. jstree był dla mnie zbyt ciężki.

Answer 2

Najprawdopodobniej sortable funkcjonalność biblioteki jQuery UI nie jest konfigurowalny (to bardzo prymitywny, przeznaczona dla Sortowanie list jeden poziom głębokości). Lepiej byłoby po prostu użyć jednego z wtyczek do drzew, które obsługują przeciąganie i upuszczanie.

Drzewo widget jQuery UI jest in development, ale można użyć jednej z następujących wtyczek:

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

użyłem JQuery Interface plugin który był łatwy w konfiguracji i działał całkiem nieźle dla tego zadania (sprawdź demo), ale chciałem czegoś lżejszego i nie wymagającego dodatkowych wtyczek.

Nawet JQuery sortable UI biblioteki jest rodzajem szczątkowe nadal można osiągnąć w jakiś sposób, że funkcjonalność:

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

To pozwoli uporządkować „Li” pod każdym „UL” (jeśli pamiętam poprawnie). Jednak nie pozwoli ci przenieść elementów "li" z jednego "ul" na inny "ul". Nawet można to zrobić (zmieniając konfigurację), okazało się, że nie jest tak stabilny i jakoś nieporęczny.

Wpadłem na proste rozwiązanie: "przycisk flagi", który dezaktywuje sortowanie i aktywację w ruchu ... i działa jak urok! Wszystko, co musisz zrobić, to śledzić identyfikator rodzica "li" przed i po przeniesieniu go.

Moje 5 centów.

Answer 4

Wtyczka jQuery do zagnieżdżania. Idealny dla co usiłuję zrobić:

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