Interfaccia utente JQuery - Aggiungi trascinabile a Droppable

Question

Come si aggiunge un elemento trascinato a un elemento di destinazione in fase di rilascio, utilizzando i draggable/dropable di jQueryUI? Sembra che il modo in cui l'interfaccia utente di jQuery funziona ora è solo spostare gli elementi sullo schermo tramite il posizionamento assoluto. Sfortunatamente, questa funzionalità rende inutili le presentazioni dei moduli, poiché non è possibile ottenere le posizioni dei valori al momento dell'invio.

Grazie in anticipo per qualsiasi articolo/puntatore!

Answer 1

Se ho capito correttamente, vuoi che l'elemento trascinato sia staccato dal suo genitore corrente e venga aggiunto a quello nuovo, giusto? Puoi usare un helper per eseguire il trascinamento (quindi l'elemento originale non ne risente) e, una volta rilasciato, staccarlo e aggiungerlo al target (grazie a @Oleg e @Brian per migliorare la mia risposta originale).

$(myDraggable).draggable({ 
    helper:"clone", 
    containment:"document" 
}); 

$(myDroppable).droppable({ 
    drop:function(event, ui) { 
     ui.draggable.detach().appendTo($(this)); 
    } 
}); 

esempio Lavorare in jsFiddle