Danh sách có thể sắp xếp và phân tách của jQuery

Question

Vì vậy, những gì tôi đang tìm là một cách để tôi sử dụng cả hai loại có thể phân loại và có thể phân chia trên cùng một phần tử. Cho phép nói rằng tôi có một danh sách gồm 5 phần tử, tất cả đều có thể sắp xếp được. Những gì tôi đang cố gắng để làm là khi một phần tử được giảm ontop của nhau, nó sẽ gắn liền với các yếu tố đó và đi ra khỏi danh sách, ví dụ:

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

phần tử đã được giảm

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item 
     <ul> 
       <li>List Item Dropped</li> 
     </ul> 
    </li> 

</ul> 

Nếu bạn có một đầu mối một câu trả lời hoặc một hướng dẫn về cách làm điều này sẽ rất đánh giá cao!

Answer 1

HTML:

<ul id="theUL"> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
</ul> 

Đây là mã sắp xếp được cho UL của bạn. Bạn cần cấu hình sự kiện thay đổi. Sự kiện thay đổi xảy ra khi sự kiện sắp xếp xảy ra, khác, điều đó có nghĩa là sự kiện thả xảy ra.

$("#theUL").sortable({ 
    revert: true, 
    items: "li", 
    change: function(event, ui) {ui.helper.addClass("change");}, 
    beforeStop: function(event, ui) {ui.helper.removeClass("change");} 
}); 

Trong mã có thể phân hủy, hãy kiểm tra xem có thay đổi không, nếu không, thì điều đó có nghĩa là bị loại bỏ.

$(".item").droppable({ 
    accept: function(el) { 
     return el.hasClass('item'); 
    }, 
    drop: function (event, ui) { 
     item=ui.draggable; 
     if(!item.hasClass('change')){ 
      //dropped! 
     } 
    } 

});