jQuery lista sortable i droppable

Question

To, czego szukam, jest dla mnie sposobem na użycie zarówno sortable, jak i droppable na tym samym elemencie. Powiedzmy, że mam listę 5 elementów, wszystkie są do sortowania. Co staram się zrobić to, gdy jeden element jest odrzucany ontop innym, to dołączy do tego elementu i wyjść z listy, przykład:

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

Element został usunięty

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

Jeśli masz wskazówkę, odpowiedź lub wskazówka, jak to zrobić, byłaby bardzo cenna!

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> 

Oto kod sortable do ul. Musisz skonfigurować zmianę zdarzenia. Zmień wydarzenie, gdy wydarzenie sortowania się dzieje, inaczej oznacza to, że zdarzenie upuszczenia ma miejsce.

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

W kodzie droppable sprawdzić, czy występuje zmiana, jeśli nie, to znaczy spadła.

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

});