TL; DR – Mit der HTML5-Drag & Drop-API können Sie dies tun Nehmen Sie ein HTML-Objekt mit dem Cursor und ziehen Sie es an eine andere Stelle.
Was können Sie in HTML5 ziehen und ablegen?
Mit HTML5 können Sie jedes Element ziehbar machen, es mit dem Cursor aufnehmen und an eine andere Stelle ziehen, die als ablegbares Element definiert ist. Versuchen Sie im folgenden Beispiel, ein Bild auf ein Quadrat zu ziehen:
Diese Funktion vereinfacht die Benutzererfahrung und ermöglicht sogar das Erstellen einfacher Online-Spiele (z. B. können Sie virtuelle Schachfiguren ziehen und ablegen). Wenn Sie ein Element ziehen, bewegt sich seine transparente Replik zusammen mit Ihrem Cursor, bis Sie es durch Loslassen der Maustaste ablegen.
Technisch gesehen ist Drag & Drop eine JavaScript-API, die HTML5 hinzugefügt wurde. Daher ist es wichtig, mindestens grundlegende Skriptkenntnisse zu haben, um mit dieser Funktionalität arbeiten zu können.
Ereignisse für das HTML5-Drag & Drop
In der folgenden Tabelle sehen Sie Alle Ereignisse, die für die Drag & Drop-Funktion relevant sind:
| Ereignis | Erläuterung |
|---|---|
| drag | Der Cursor bewegt sich beim Ziehen eines Elements. |
| drop | Der Ziehvorgang wird beendet. |
| dragstart | Der Cursor nimmt das Element auf und beginnt mit dem Ziehen. |
| dragend | Die Maustaste wird losgelassen und das Element fallen gelassen |
| Dragenter | Der Cursor betritt das Zielelement |
| Dragleave | Der Cursor verlässt das Zielelement |
| Dragover | Der Cursor bewegt sich über das Zielelement |
Schritt für Schritt Erklärung von Drag & Drop
Die HTML5-Drag & Drop-Codierung erscheint auf den ersten Blick recht kompliziert, da sie Skripte in JS enthält. Lassen Sie uns jedoch jeden Teil des Prozesses untersuchen, um das Verständnis zu erleichtern.
Ziehbare Elemente
Zuerst müssen Sie sicherstellen, dass das Element, das Sie ziehen möchten, ein hat HTML5 draggable -Attribut angewendet und sein Wert auf true gesetzt:
Ziehen
Definieren Sie anschließend, was nach dem Ziehen eines Objekts geschehen soll. Sie können dies durch Aufrufen tun eine Ereignisbehandlungsroutine für ein dragstart -Ereignis und die Definition einer auszuführenden Funktion.
Der Wert und der Datentyp der gezogenen Daten müssen durch dataTransfer.setData() Methode:
Löschen
Die ziehbaren HTML5-Daten werden durch Anhängen eines Ereignishandlers an das Ereignis dragover angegeben.
Elemente und Daten können nicht sein Standardmäßig in anderen Elementen abgelegt. Dies bedeutet, dass Sie die Elemente stoppen müssen Standardverhalten mit der Methode event.preventDefault():
Ein drop -Ereignis tritt auf, wenn die ziehbaren HTML5-Daten gelöscht werden. Es wird vom ondrop -Ereignishandler aufgerufen:
Der endgültige Code: ein Beispiel
Grundsätzlich benötigen Sie Ihren Code, um dies zu können Führen Sie vier Schritte aus:
- Verhindern Sie die Standardaktion des Webbrowsers in Bezug auf die Daten, indem Sie
preventDefault() - aufrufen mit der Methode
dataTransfer.getData() - Befestigen Sie das gezogene Element am Drop-Element
Lassen Sie uns sehen, wie es in der Methode funktioniert Beispiel unten:
HTML5-Drag & Drop: Nützliche Tipps
- Sie können verschiedene Arten von Elementen ziehen, einschließlich, aber nicht beschränkt auf Dateien, Links, Bilder und Text.
- Sie können auch mehrere Elemente gleichzeitig ziehen. Es wird jedoch empfohlen, alle aus Gründen der Konsistenz im selben Format zu haben.
- Formularelemente, die Benutzereingaben akzeptieren, können standardmäßig ablegbare Bereiche sein.