Trascina e rilascia con l'interfaccia utente di jQuery

Prima di andare con alcuni esempi pratici, diamo un'occhiata ai metodi Drag and Drop che jQuery UI ha per noi.
1- Metodo trascinabile ()
Il metodo trascinabile gestisce gli elementi di una pagina HTML che si desidera spostare, questo metodo può essere utilizzato in due modi diversi:

 • $ (selettore, contesto) .trascinabile (opzioni) • $ (selettore, contesto) .trascinabile ("azione", parametri) 

Vediamo un esempio:
Per prima cosa dobbiamo includere i file necessari, un errore comune che viene fatto è includere l'interfaccia utente jQuery .js prima di jQuery .js, ricorda che jQuery è il nucleo e l'interfaccia utente jQuery sono solo librerie, plugin, widget, che senza jQuery non lo faranno funzionerebbe.

Invochiamo il metodo:

 $ (funzione () {$ ("#trascinabile") .trascinabile ();}); 

E lo associamo al selettore che sarà il div con esso.

trascinami in giro

Ecco il codice sorgente completo:

 jQuery UI trascinabile - Funzionalità predefinita
trascinami in giro

2- metodo droppabile ()
Il metodo droppable gestisce gli elementi di una pagina HTML che si desidera trascinare in un'area. Come il metodo trascinabile, può essere utilizzato in due modi diversi:

 • $ (selettore, contesto) .dropable (opzioni) • $ (selettore, contesto) .dropable ("azione", parametri) 

Diamo un'occhiata a un esempio di questo:
Includiamo i file, aggiungiamo gli stili, invochiamo i metodi (qui useremo ugualmente il metodo trascinabile) seguito dal metodo trascinabile. Qui il codice sorgente:

 jQuery UI Droppable - Funzionalità predefinita
Trascinami al mio obiettivo
Rilascia qui

E questo sarebbe il nostro output nel browser:

E se mettessimo insieme entrambi i concetti in un esempio più complicato, qualcosa come un carrello della spesa? Vediamo:
Per prima cosa includiamo i nostri file:

Aggiungiamo alcuni stili al nostro carrello:

Utilizzeremo anche il metodo accordion() dalla libreria jQuery UI per rendere più appetibile il nostro carrello, invochiamo i nostri metodi e li associamo ai selettori, in questo caso estenderemo tutte le funzionalità del metodo trascinabile ad una lista:

Ed ecco come sarebbe il nostro carrello:

Per poterlo testare, ecco il codice sorgente completo:

 jQuery UI Droppable - Demo del carrello degli acquisti
Magliette

Camicia Lolcat
Camicia Cheezeburger
Camicia Buckit


Borse

Zebrato a strisce
Pelle nera
Pelle di alligatore


Gadget

i phone
iPod
iPad


Aggiungi i tuoi articoli qui

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo