jQuery sortable and droppable list

Question

그래서 내가 찾고있는 것은 동일한 요소에서 sortable 및 droppable을 모두 사용하는 방법입니다. 5 개 요소 목록이 있는데, 모두 정렬 할 수 있습니다. 하나 개의 요소가 다른 하나의 ontop을 삭제하면 어떻게 내가 할 노력하고있어 것은, 그것은 그 요소에 추가하고 목록에서 이동합니다, 예 :

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

요소가

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

를 떨어 뜨렸

단서가있는 경우이 작업을 수행하는 방법에 대한 대답이나 가이드 라인이 있으면 매우 감사하겠습니다!

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> 

은 UL의 정렬 코드입니다. 변경 이벤트를 구성해야합니다. 변경 이벤트는 정렬 이벤트가 발생하면 발생하고, 그렇지 않으면 삭제 이벤트가 발생합니다. 변경이 발생하는 경우, 다음 수단이 삭제되지 않은 경우 코드에서 낙하 할

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

가 확인한다.

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

});