drag & drop

Drag & drop is met jQuery UI eenvoudig te realiseren.

Eerst kijken we naar het resultaat dat we willen bereiken. Je kunt 2 elementen verslepen.
Als ze op een ander element worden losgelaten, verdwijnen ze en wordt er gemeld welk element is gedropt.
De elementen krijgen allemaal een id. Het doelelement bestaat hier uit een lege div, die met CSS van een hoogte, breedte en positie wordt voorzien.

Om een element draggable te maken wordt jquery en een aangepaste jQueryUI script gekoppeld.
Op http://jqueryui.com/download/ vink je eerst alles uit en hoef je alleen droppable aan te vinken om de nodige opties van het script te krijgen.
Als de scripts gekoppeld zijn, volstaat $('#mijnDiv').draggable() om een element met de id mijnDiv versleepbaar te maken.
We zorgen er ook voor dat een versleept element boven de andere elementen ligt.
Hiervoor wordt een variabele aangemaakt, die bij een mousedown-event wordt opgehoogd.

We zorgen er eerst voor dat een element gaat reageren als er een draggable element boven wordt losgelaten: $('#mijnDiv').draggable({ drop: eenfunctie });
Voor een eerste poging laten we die functie een alert(); geven.
Daarna vervangen we de alert door statements die het losgelaten element laten verdwijnen.
Daarvoor maken we een variabele aan. Bij de mousedown krijgt die variabele de id mee van het element waar op geduwd wordt.
Bij het droppen wordt die variabele geselecteerd en met hide() verborgen.
Ook kan er een tekstvariabele gemaakt worden, die met append() aan de html wordt toegevoegd.
Bovendien wordt een variabele gemaakt voor de padding. Bij het droppen wordt die padding opgehoogd via css().

Met een toevoeging in jQuery kan er bij een click de elementen weer zichtbaar gemaakt worden en teruggeplaatst worden op hun uitgangspositie.

Door een stukje script toe te voegen werkt deze jQueryUI pagina ook op touch-apparten. hier is gebruik gemaakt van http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices waarbij we de opdrachten in de init-functie los kunnen plaatsen omdat die niet apart hoeft te worden aangeroepen. Het script voorziet niet in een click-event, daarom veranderen we het click-event in een mousedown.

Zet deze training online en stuur mij een linkje.