Drag & Drop elementen
Het verplaatsen van elementen op een pagina vergde ooit ingewikkelde JavaScripts, vaak met jQuery of iets dergelijks. Binnen HTML5 is er echter een API beschikbaar, waarmee het eenvoudig is realiseren.
Hieronder zie je twee rechthoeken. In de bovenste staat een logo. Als je er met de muis overheen gaat verandert de cursor
in een kruis, waarmee wordt aangegeven dat het kan worden verplaatst.
Je kunt het plaatje in de onderste rechthoek slepen, maar niet ergens buiten de rechthoek. Terugslepen naar de bovenste rechthoek
kan ook.
Op deze pagina wordt uitgelegd hoe je zoiets aanpakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder het plaatje.
De werking van het script wordt besproken. Op de API-functions zelf wordt niet verder ingegaan.
- De werking van het script
- De code bestaat uit een combinatie van HTML, CSS en JavaScript.
- De Drag & Drop API is onderdeel van de HTML5-standaard. Elk HTML-element kan "draggable" (versleepbaar) worden gemaakt.
- Het plaatje (logo) is draggable gemaakt door aan de <img>-tag het attribuut draggable="true"> toe te voegen.
- De browser reageert op het verslepen door een event-handler: ondragstart="myDrag(event)".
- De twee rechthoeken zijn gemaakt met behulp van een <div>-tag, elk met een eigen id. De bovenste rechthoek heeft id="divBoven". De onderste rechthoek heeft id="divOnder". CSS is gebruikt voor het vastleggen van de plaats, afmetingen en de rand.
- Om te zorgen dat de rechthoeken een element kunnen ontvangen (lees: dat er een HTML-element op kan worden gedropt), zijn
er twee event-handlers gedefinieerd. Met ondragover="allowDrop(event)" 'merkt' de rechthoek dat er iets overheen
wordt gesleept wat gedropt kan worden. Met ondrop="myDrop(event)" wordt het element echt binnen de rechthoek
opgenomen.
- Het is mogelijk om hier een link van te maken. Daarvoor gebruik je onclick bij het plaatje. Een <a>-tag werkt hier, om door mij niet begrepen redenen, niet.
- Informatie over de API-functions vind je op w3schools.com.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
#divBoven, #divOnder {
width: 215px;
height: 20px;
padding: 10px;
border: 1px solid navy;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function myDrag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function myDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
(Zet dit in de <BODY> op de plaats waar de rechthoeken moeten verschijnen).
<div id="divBoven" ondrop="myDrop(event)"
ondragover="allowDrop(event)">
<img id="drag1" src="logo.png" draggable="true"
ondragstart="myDrag(event)" style="cursor:move">
</div>
<div id="divOnder" ondrop="myDrop(event)"
ondragover="allowDrop(event)"></div>
Downloaden:
Druk op de knop:
File: voorb504.zip, 556 bytes.
