Dra och släpp med jQuery UI

Innan vi går med några praktiska exempel, låt oss ta en titt på Drag and Drop -metoderna som jQuery UI har för oss.
1- Dragbar metod ()
Dragbar -metoden hanterar elementen på en HTML -sida som du vill flytta, den här metoden kan användas på två olika sätt:

 • $ (väljare, sammanhang) .draggable (alternativ) • $ (väljare, sammanhang) .draggable ("action", params) 

Låt oss se ett exempel:
Först måste vi inkludera de nödvändiga filerna, ett vanligt misstag som görs är att inkludera jQuery UI .js före jQuery .js, kom ihåg att jQuery är kärnan och jQuery UI är bara bibliotek, plugins, widgets, som utan jQuery inte kommer skulle jobba.

Vi åberopar metoden:

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

Och vi associerar det med väljaren som kommer att vara div med det.

Dra mig runt

Här är hela källkoden:

 jQuery UI Draggable - Standardfunktion
Dra mig runt

2- droppable () -metod
Den fällbara metoden hanterar elementen på en HTML -sida som du vill släppa in i ett område. Precis som draggable -metoden kan den användas på två olika sätt:

 • $ (väljare, sammanhang). Avlägsningsbar (alternativ) • $ (väljare, sammanhang). Avlägsningsbar ("åtgärd", params) 

Låt oss titta på ett exempel på detta:
Vi inkluderar filerna, vi lägger till stilarna, vi åberopar metoderna (här använder vi draggable -metoden lika) följt av droppable -metoden. Här är källkoden:

 jQuery UI Droppable - Standardfunktion
Dra mig till mitt mål
Släpp här

Och detta skulle vara vår produktion i webbläsaren:

Vad händer om vi sätter ihop båda begreppen i ett mer komplicerat exempel, ungefär som en kundvagn? Låt oss se:
Först inkluderar vi våra filer:

Vi lägger till några stilar i vår vagn:

Vi kommer också att använda dragspelsmetoden () från jQuery UI -biblioteket för att göra vår vagn mer attraktiv, vi åberopar våra metoder och associerar dem med väljarna, i det här fallet kommer vi att utöka all dragbarhetens funktionalitet till en lista:

Och så här skulle vår kundvagn se ut:

Så att du kan testa det här är hela källkoden:

 jQuery UI Droppable - Demo för kundvagn
T-shirts

Lolcat skjorta
Cheezeburger skjorta
Buckit skjorta


påsar

Zebra randig
Svart läder
Alligator läder


Prylar

iPhone
iPod
iPad


Lägg till dina saker här

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng