jQuery lồng nhau có thể sắp xếp - Di chuyển các yếu tố LI trong tất cả các UL có sẵn

Question

Tôi có mã sau hoạt động mặc dù nó chạy khá chậm Tôi cảm thấy. Những gì tôi muốn làm là cho phép <li> 's được di chuyển tự do theo hiện tại <ul>' s hoặc di chuyển chúng lên một mức độ. Tôi cũng muốn có thể tạo phân cấp vì vậy nếu bạn kéo một <li> theo một số <li> khác sẽ tạo cấu trúc phân cấp. Tôi nghĩ theo nghĩa đó, tôi sẽ phải render một <ul> theo từng <li> chỉ trong trường hợp. Tôi chỉ muốn giới hạn nó đến 2 hoặc 3 cấp độ sâu.

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

Tuyệt vời câu trả lời cho điều này là

https://github.com/ilikenwf/nestedSortable

tôi vui vì tôi đã tìm thấy nó. jstree quá nặng đối với tôi.

Answer 2

Rất có thể chức năng sắp xếp của thư viện giao diện người dùng jQuery không thể định cấu hình được (rất thô sơ, có nghĩa là sắp xếp danh sách một cấp sâu). Bạn nên sử dụng một trong những plug-in cây hỗ trợ kéo và thả.

Cây tùng jQuery UI là in development, nhưng bạn có thể sử dụng một trong những plugin sau đây:

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

Tôi đã sử dụng JQuery Interface plugin cái nào dễ cài đặt và hoạt động khá tốt cho công việc đó (kiểm tra số demo), nhưng tôi muốn một thứ gì đó nhẹ hơn và không yêu cầu bổ sung.

Thậm chí JQuery UI thư viện sắp xếp được là loại thô sơ bạn vẫn có thể đạt được bằng cách nào đó chức năng:

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

này sẽ cho phép bạn sắp xếp "li" dưới bất kỳ "ul" (nếu tôi có thể nhớ chính xác). Tuy nhiên, nó sẽ không cho phép bạn di chuyển các phần tử "li" từ một "ul" sang "ul" khác. Thậm chí nó có thể làm điều đó (thay đổi cấu hình), tôi thấy nó không ổn định và bằng cách nào đó rườm rà.

Tôi đã đưa ra một giải pháp đơn giản: "nút cờ", tắt kích hoạt sắp xếp và kích hoạt di chuyển ... và nó hoạt động như một sự quyến rũ! Tất cả những gì bạn phải làm là theo dõi id cha "li" trước và sau khi di chuyển nó.

5 xu của tôi.

Answer 4

Plugin jquery "có thể lồng". Hoàn hảo cho những gì tôi đang cố gắng để làm:

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