Früher war es aufwendig eine Drag & Drop Funktionalität zu programmieren. Dank der neuen HTML 5 Drag & Drop API wird dies einfacher.
Zuerst müssen wir festlegen, welche Elemente ziehbar sein sollen. Die Elemente <img> und <a> sind von Haus aus ziehbar. Für alle weiteren muss das Attribut draggable=“true“ angewendet werden.
Das dataTransfer-Objekt ist das zentrale Objekt im Drag&Drop Prozess. Es hält die Daten die beim Drag & Drop Vorgang an eine andere Stelle gezogen werden. Diese werden beim dragStart-Event in das DataTransfer-Objekt geschrieben und beim drop-Event wieder ausgelesen.
Die verschiedenen Funktionen und Attribute, die am dataTransfer-Objekt aufgerufen beziehungsweise gesetzt werden können, werden wie folgt beschrieben:
- dataTransfer.dropEffect[=value] – Über das Attribut dropEffect kann die gewählte Operation geändert oder abgefragt werden
- dataTransfer.effectAllowed[=value] – Operationen können hier abgefragt werden (none, copy, link, move)
- dataTransfer.types – Über dieses Attribut wird eine DOMString-List zurückgegeben
- dataTransfer.clearData – die Daten des mitgelieferten Formats werden gelöscht
- dataTransfer.setData(format,data) – über diese Methoden werden die Daten im angegebenen Format hinzugefügt
Jetzt geht es aber an die Implementation
Eine Box1 können wir mit dem folgenden Code ziehbar machen:
|
1 2 3 4 |
<div id="box1" draggable="true" ondragstart="return dragStartHandler(event)" ondragend="return dragEndHandler(event)"> </div> |
Wir erstellen eine weitere Box2 in welche die Box1 hineingeschoben werden kann:
|
1 2 3 4 5 |
<div id="box2" ondragenter="return dragEnterHandler(event)" ondrop="return dragDropHandler(event)" ondragover="return dragOverHandler(event)" </div> |
Unsere Funktion dragStartHandler sieht dann wie folgt aus:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function dragStartHandler(event) { const box2 = document.getElementById("box2"); box2.style.opacity = 0.5; box2.style.borderStyle = 'dotted'; event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData("Text", event.target.getAttribute('id'); const dragIcon = document.createElement('img'); dragIcon.src = 'bild.png'; dragIcon.width = 100; event.dataTransfer.setDragImage(dragIcon,0,0); return true; } |
dragEndHandler:
|
1 2 3 4 5 6 7 8 |
function dragEndHandler(event) { const box1 = document.getElementById("box1"); box1.style.backgroundColor = 'yellow'; const box2 = document.getElementById("box2"); box2.style.opacity = 1; box1.style.opacity = 1; box1.style.borderStyle = 'solid'; } |
DragEnterHandler:
|
1 2 3 4 |
function dragEnterHandler(event) { event.preventDefault(); return true; } |
DragOverHandler:
|
1 2 3 4 5 6 |
function dragOverHandler(event) { const boxB = document.getElementById('boxB'); boxB.style.backgroundColor='green'; document.getElementById('header').innerHTML = 'Box2 ist jetzt grün'; return false; } |
DragDropHandler:
|
1 2 3 4 5 6 7 |
function dragDropHandler(event) { const source = event.dataTransfer.getData('Text'); event.target.appendChild(document.getElementById(source)); event.stopPropagation(); document.getElementById('header').innerHTML = 'box2 ist jetzt gelb'; return false; } |
Die fertige Version findest du hier: https://codepen.io/Musictrunk/pen/JjomPNa
Die Drag & Drop API ist noch nicht auf allen Browsern verfügbar. Um eine genau Übersicht zum bekommen sollte man sich über https://caniuse.com erkundigen, ob das Feature im gewünschten Browser unterstützt wird.
Inspiriert von Web&Mobile 2/2020