Træk og slip med jQuery UI

Inden vi går med nogle praktiske eksempler, lad os tage et kig på de træk og slip -metoder, som jQuery UI har til os.
1- Trækbar metode ()
Trækbare metoden administrerer elementerne på en HTML -side, som du vil flytte, denne metode kan bruges på to forskellige måder:

 • $ (vælger, kontekst) .draggable (muligheder) • $ (vælger, kontekst) .draggable ("handling", params) 

Lad os se et eksempel:
Først skal vi inkludere de nødvendige filer, en almindelig fejl, der begås, er at inkludere jQuery UI .js før jQuery .js, husk at jQuery er kernen, og jQuery UI er kun biblioteker, plugins, widgets, som uden jQuery ikke vil ville fungere.

Vi påberåber os metoden:

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

Og vi forbinder det med vælgeren, der vil være div med det.

Træk mig rundt

Her er den komplette kildekode:

 jQuery UI Draggable - Standardfunktionalitet
Træk mig rundt

2- droppable () metode
Faldbar metode håndterer elementerne på en HTML -side, som du vil slippe ind i et område. Ligesom draggable -metoden kan den bruges på to forskellige måder:

 • $ (vælger, kontekst). Dropper (valgmuligheder) • $ (vælger, kontekst). Dropper ("handling", params) 

Lad os se på et eksempel på dette:
Vi inkluderer filerne, vi tilføjer stilarterne, vi påberåber os metoderne (her vil vi bruge draggable -metoden ligeligt) efterfulgt af metoden dropbar. Her er kildekoden:

 jQuery UI Droppable - Standardfunktionalitet
Træk mig til mit mål
Drop her

Og dette ville være vores output i browseren:

Hvad hvis vi sætter begge begreber sammen i et mere kompliceret eksempel, sådan som en indkøbsvogn? Lad os se:
Først inkluderer vi vores filer:

Vi tilføjer nogle stilarter til vores kurv:

Vi vil også bruge harmonika () -metoden fra jQuery UI -biblioteket til at gøre vores vogn mere attraktiv, vi påberåber os vores metoder og forbinder dem med vælgerne, i dette tilfælde vil vi udvide al funktionaliteten af ​​den trækbare metode til en liste:

Og sådan ville vores indkøbskurv se ud:

Så du kan teste det, her er den komplette kildekode:

 jQuery UI Droppable - Demo for indkøbsvogn
T-shirts

Lolcat skjorte
Cheezeburger skjorte
Buckit skjorte


Tasker

Zebra stribet
Sort læder
Alligator læder


Gadgets

iPhone
iPod
iPad


Tilføj dine varer her

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt