HTML 5 Drag and Drop API

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:

Wir erstellen eine weitere Box2 in welche die Box1 hineingeschoben werden kann:

Unsere Funktion dragStartHandler sieht dann wie folgt aus:

dragEndHandler:

DragEnterHandler:

DragOverHandler:

DragDropHandler:

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.