jQuery elenco ordinabile e trascinabile

Question

Quindi quello che sto cercando è un modo per me di utilizzare sia ordinabile che trascinabile sullo stesso elemento. Diciamo che ho una lista di 5 elementi, questi sono tutti ordinabili. Quello che sto cercando di fare è quando un elemento è caduto ontop di un altro, si aggiungerà a quell'elemento e andare fuori dalla lista, ad esempio:

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

Element è stato fatto cadere

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

Se hai un indizio, una risposta o una linea guida su come farlo sarebbe molto apprezzata!

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> 

Ecco il codice ordinabile per la UL. È necessario configurare l'evento di modifica. L'evento change si verifica quando si verifica un evento sort, altrimenti, si verifica l'evento drop.

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

Nel codice droppable, controllare se si verifica il cambiamento, se non, allora vuol dire cadere.

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

});