lessen van Theo den Blanken - drag & drop met jQuery UI

Drag & drop is met jQuery UI eenvoudig te realiseren.
De versie voor vormgevers staat hier.

Drag & drop met jQueryUI stap 1: slepen (00:07:33)

Met jQueryUI (een plugin bij jQuery) kun je extra functionaliteit toevoegen. Op hun site kun je je eigen download eerste configureren. Drag en drop moeten geselecteerd zijn, een thema is niet nodig. Na download en koppeling, kun je je eigen script toevoegen. Je selecteert een element en voeg daar .draggable() method aan toe.

Drag & drop met jQueryUI stap 2: het script reorganiseren (00:09:36)

Er moet meer gebeuren dan alleen maar het verslepen. Daarom structureren we het script beter.

Je maakt variabelen voor de elementen die versleept moeten worden.
Je maakt een functie waarin het ingevoerde element draggable gemaakt wordt (het element is het argument in de functie).
Je hoogt ook een variabele op, die de hoogste waarde van de z-index van de elementen weergeeft.
Die nieuwe z-index ken je toe aan de stijle van het element in je functie. Hij komt daardoor bovenop te liggen.

De functie wordt via een eventListener aangeroepen. Het event is .mousedown().

Als we deze versie testen zien we dus het sleepbaar maken opnieuw, maar het element dat gesleept wordt, ligt bovenop.

Drag & drop met jQueryUI stap 3: neerzetten (drop) (00:10:31)

Met jQueryUI is er een method .droppable() met daarin de method drop. Je kunt daarin aangeven welke opdrachten uitgevoerd moeten worden als er iets op het element gedropt wordt. Hier maken we het element groter, laten het gedropte element verdwijnen en geven zijn tekst weer.

Drag & drop met jQueryUI stap 4: Het terugzetten van de elementen (00:04:56)

Hier worden de gedropte elementen weer teruggezet, bij een click. Ook de teksten worden verwijderd en de afmetingen teruggebracht.

Drag & drop met jQuery UI stap 5: uitbreiden naar touch-apparaten (00:03:08)

Touchapparaten kennen geen muis en daarmee ook geen events die met de muis worden veroorzaakt. Daarvoor zijn er scripts ontwikkeld, die toegevoegd moeten worden: http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices Test wel op het device uit!

Zet deze training online en stuur mij een linkje.