MICHELEPISANI.IT

jQuery UI: guida all'uso delle interazioni

'Drag and Drop' per aggiungere elementi al carrello

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

Marzo 08
07:532015

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.


Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …

Luca

Peccato che fb abbia modificato tutto ed ora sembra non esserci alcun modo per accedere alle …