Povucite i ispustite pomoću jQuery korisničkog sučelja

Prije nego krenemo s nekim praktičnim primjerima, pogledajmo metode Drag and Drop koje jQuery UI ima za nas.
1- Metoda koja se može povući ()
Metoda koja se može povući upravlja elementima HTML stranice koju želite premjestiti. Ova se metoda može koristiti na dva različita načina:

 • $ (selektor, kontekst) .draggable (opcije) • $ (selektor, kontekst) .draggable ("akcija", parametri) 

Pogledajmo primjer:
Prvo moramo uključiti potrebne datoteke, česta greška koja se događa je uključivanje jQuery UI .js prije jQuery .js, zapamtite da je jQuery jezgra, a jQuery korisničko sučelje samo knjižnice, dodaci, widgeti, koji bez jQueryja neće bi radilo.

Pozivamo se na metodu:

 $ (function () {$ ("#draggable") .draggable ();}); 

I povezujemo ga s selektorom koji će s njim biti div.

Povuci me

Evo potpunog izvornog koda:

 jQuery UI Draggable - Zadana funkcionalnost
Povuci me

2- droppable () metoda
Metoda koja se može ispustiti upravlja elementima HTML stranice koje želite ispustiti u područje. Kao i metoda povlačenja, može se koristiti na dva različita načina:

 • $ (selektor, kontekst) .droppable (opcije) • $ (selektor, kontekst) .droppable ("radnja", parametri) 

Pogledajmo primjer ovoga:
Uključujemo datoteke, dodajemo stilove, pozivamo metode (ovdje ćemo jednako koristiti metodu koja se može povući), a zatim metodu koja se može ispustiti. Evo izvornog koda:

 jQuery UI Droppable - Zadana funkcionalnost
Odvuci me do moje mete
Svrati ovdje

I ovo bi bio naš izlaz u pregledniku:

Što ako oba koncepta spojimo u složeniji primjer, nešto poput košarice za kupnju? Da vidimo:
Prvo uključujemo naše datoteke:

U košaricu dodajemo neke stilove:

Također ćemo koristiti metodu harmonike () iz biblioteke korisničkog sučelja jQuery kako bismo našu košaricu učinili privlačnijom, pozivamo svoje metode i povezujemo ih s biračima, u ovom slučaju ćemo proširiti sve funkcionalnosti metode koja se može prevući na popis:

A ovako bi izgledala naša košarica:

Kako biste ga mogli isprobati, evo potpunog izvornog koda:

 jQuery UI Droppable - Demo košarice
Majice

Lolcat košulja
Cheezeburger košulja
Buckit košulja


Torbe

Zebra prugasta
Crna koža
Koža od aligatora


Gadgeti

iPhone
iPod
iPad


Ovdje dodajte svoje stavke

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod