Glisați și fixați cu interfața de utilizare jQuery

Înainte de a merge cu câteva exemple practice, să aruncăm o privire asupra metodelor Drag and Drop pe care jQuery UI le are pentru noi.
1- Metoda glisabilă ()
Metoda glisabilă gestionează elementele unei pagini HTML pe care doriți să le mutați, această metodă poate fi utilizată în două moduri diferite:

 • $ (selector, context) .draggable (opțiuni) • $ (selector, context) .draggable ("acțiune", parametri) 

Să vedem un exemplu:
Mai întâi trebuie să includem fișierele necesare, o greșeală obișnuită care se face este să includem jQuery UI .js înainte de jQuery .js, amintiți-vă că jQuery este nucleul și jQuery UI sunt doar biblioteci, pluginuri, widget-uri, care fără jQuery nu vor ar funcționa.

Invocăm metoda:

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

Și îl asociem la selectorul care va fi div cu el.

Trage-mă în jur

Iată codul sursă complet:

 jQuery UI Draggable - Funcționalitate implicită
Trage-mă în jur

2- metoda droppable ()
Metoda droppable gestionează elementele unei pagini HTML pe care doriți să o introduceți într-o zonă. La fel ca metoda glisabilă, poate fi utilizată în două moduri diferite:

 • $ (selector, context) .droppable (opțiuni) • $ (selector, context) .droppable („acțiune”, parametri) 

Să vedem un exemplu în acest sens:
Includem fișierele, adăugăm stilurile, invocăm metodele (aici vom folosi metoda glisabilă în mod egal) urmată de metoda droppable. Aici codul sursă:

 jQuery UI Droppable - Funcționalitate implicită
Trage-mă la țintă
Treci aici

Și acesta ar fi rezultatul nostru în browser:

Ce se întâmplă dacă punem ambele concepte împreună într-un exemplu mai complicat, ceva de genul unui coș de cumpărături? Sa vedem:
Mai întâi includem fișierele noastre:

Adăugăm câteva stiluri în coșul nostru:

De asemenea, vom folosi metoda acordeon () din biblioteca jQuery UI pentru a face coșul nostru mai atractiv, invocăm metodele noastre și le vom asocia cu selectoarele, în acest caz vom extinde toate funcționalitățile metodei glisabile la o listă:

Și așa ar arăta coșul nostru de cumpărături:

Pentru a-l putea testa, iată codul sursă complet:

 jQuery UI Dropable - Demo de coș de cumpărături
Tricouri

Cămașă Lolcat
Cămașă Cheezeburger
Cămașă Buckit


Genti

Zebra Striped
Piele neagra
Piele de aligator


Obiecte gadget

iPhone
iPod
iPad


Adăugați articolele aici

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv