Trascinare elementi all'interno di altri elementi con jQuery UI Droppable

Inserire elementi all'interno di altri elementi è un'operazione che effettuiamo costantemente sul web, basti pensare all'aggiunta di un prodotto all'interno di un carrello virtuale in un sito di commercio elettronico quando vogliamo acquistare un bene o un servizio in rete. Il metodo "droppable" della libreria jQuery UI ci permette di farlo tramite trascinamento. Con il 'drag and drop' basterà trascinare l'elemento di nostro interesse all'interno dell'elemento contenitore e rilasciarlo in modo da attivare la funzione di interesse, che nel caso dell'esempio in questione sarà l'aggiunta di un prodotto alla sessione del carrello. Assegnando il metodo ad un elemento del DOM questo assumerà la capacità di ricevere elementi su di esso, quest'ultimi dovranno a sua volta avere l'assegnazione del metodo "draggable" per poter essere resi trascinabili.

Per prima cosa la nostra pagina dovrà inludere le librerie jQuery e jQuery UI tra i tag script nell'head (quelle elencate di seguito assicurano il corretto funzionamento del codice di esempio):

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

E' necessario creare un elemento a cui associare la capacità di ricevere elementi trascinati su di esso e creare almeno un elemento trascinabile:

<div id="contenitore"> 
    <div id="carrello"> 
        <p>Carrello</p> 
    </div> 
    <div id="fagioli"> 
        <p>Barattolo di fagioli</p> 
    </div> 
</div>

Un po' di CSS per definirne la visualizzazione degli elementi e far cambiare il puntatore del mouse quando ci troviamo sopra l'elemento trascinabile:

#carrello {background: #ccc;width:200px;height:250px;padding:0.5em;float:left;margin:10px 10px 10px 0;}
#fagioli {background: #822222;width:70px;height:90px;padding:0.5em;float:left;margin:10px;}
#fagioli:hover {cursor:move}

Ed infine il fulcro della questione, l'assegnazione del metodo all'elemento. Nel codice di esempio faccio uso di 2 eventi relativi al widget "droppable", nello specifico drop e out, che gestiscono funzioni rispettivamente nel momento in cui rilascio l'oggetto trascinabile all'interno di quello adibito a riceverlo e quando lo trascino al di fuori dello stesso. In questo caso faccio in modo di essere avvisato quando il prodotto è stato aggiunto al carrello e quando vi è stato rimosso:

$(function() {
    $( "#fagioli" ).draggable();
    $( "#carrello" ).droppable({
        drop: function( event, ui ) {
            $( this )
            .find( "p" )
            .html( "Fagioli aggiunti al carrello." );
        },
        out: function( event, ui ) {
            $( this )
            .find( "p" )
            .html( "Fagioli rimossi dal carrello." );
        }            
    });    
});

Potete vedere il codice in funzione nell'esempio che ho creato su JSFiddle e che potete testare direttamente nel codice seguente all'interno del tab "Result":

Per un approfondimento sulle opzioni, metodi ed eventi utilizzabili rimando alla documentazione ufficiale del widget droppable sul sito di jQueryUI.