HTML5 – Drag & Drop (Deutsch)
Drag & Drop (DnD) ist ein leistungsstarkes Benutzeroberflächenkonzept, das das Kopieren, Neuanordnen und Löschen erleichtert von Elementen mit Hilfe von Mausklicks. Auf diese Weise kann der Benutzer die Maustaste über ein Element klicken und gedrückt halten, an eine andere Stelle ziehen und die Maustaste loslassen, um das Element dort abzulegen.
Um Drag & Drop-Funktionen mit herkömmlichem HTML4 zu erzielen, Entwickler müssten entweder komplexe JavaScript-Programmierung oder andere JavaScript-Frameworks wie jQuery usw. verwenden.
Jetzt hat HTML 5 eine Drag & Drop-API (DnD) entwickelt, die native Browser-Unterstützung für die Browsererstellung bietet Das Codieren ist viel einfacher.
HTML 5 DnD wird von allen gängigen Browsern wie Chrome, Firefox 3.5 und Safari 4 usw. unterstützt.
Drag & Drop-Ereignisse
Es gibt eine Reihe von Ereignissen, die in verschiedenen Phasen des Drag & Drop-Vorgangs ausgelöst werden. Diese Ereignisse sind unten aufgeführt –
| Sr.Nr. | Ereignisse & Beschreibung |
|---|---|
| 1 |
dragstart Wird ausgelöst, wenn der Benutzer mit dem Ziehen des Objekts beginnt. |
| 2 |
Dragenter Wird ausgelöst, wenn die Maus zum ersten Mal über das Zielelement bewegt wird, während ein Drag ausgeführt wird. Ein Listener für dieses Ereignis sollte angeben, ob ein Ablegen über diesen Ort zulässig ist. Wenn keine Listener vorhanden sind oder die Listener keine Operationen ausführen, ist ein Löschen standardmäßig nicht zulässig. |
| 3 |
Dragover Dieses Ereignis wird ausgelöst, wenn die Maus beim Ziehen über ein Element bewegt wird. In den meisten Fällen entspricht der Vorgang, der während eines Listeners ausgeführt wird, dem Dragenter-Ereignis. |
| 4 |
dragleave Dieses Ereignis wird ausgelöst, wenn die Maus ein Element verlässt, während ein Drag ausgeführt wird. Listener sollten alle Hervorhebungs- oder Einfügungsmarkierungen entfernen, die für das Drop-Feedback verwendet werden. |
| 5 |
Ziehen Wird jedes Mal ausgelöst, wenn die Maus bewegt wird, während das Objekt gezogen wird. |
| 6 |
drop Das Drop-Ereignis wird auf das Element ausgelöst, bei dem der Drop am Ende des Ziehvorgangs aufgetreten ist. Ein Listener ist dafür verantwortlich, die gezogenen Daten abzurufen und an der Ablagestelle einzufügen. |
| 7 |
dragend Wird ausgelöst, wenn der Benutzer beim Ziehen eines Objekts die Maustaste loslässt. |
Hinweis – Beachten Sie, dass nur Drag-Ereignisse ausgelöst werden. Mausereignisse wie Mausbewegungen werden während eines Ziehvorgangs nicht ausgelöst.
Das DataTransfer-Objekt
Die Ereignis-Listener-Methoden für alle Drag & Drop-Ereignisse akzeptieren Ereignisobjekte mit einem schreibgeschützten Attribut namens dataTransfer.
Der event.dataTransfer gibt das dem Ereignis zugeordnete DataTransfer-Objekt wie folgt zurück:
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
Das DataTransfer-Objekt enthält Daten zum Ziehen und Drop-Operation. Diese Daten können abgerufen und in Bezug auf verschiedene Attribute festgelegt werden, die dem DataTransfer-Objekt zugeordnet sind, wie unten erläutert –
| Sr.Nr. | DataTransfer-Attribute und ihre Beschreibung |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Gibt eine DOMStringList zurück, in der die im Dragstart-Ereignis festgelegten Formate aufgelistet sind. Wenn Dateien gezogen werden, ist einer der Typen die Zeichenfolge „Dateien“. |
| 4 |
dataTransfer.clearData () Entfernt die Daten der angegebenen Formate. Entfernt alle Daten, wenn das Argument weggelassen wird. |
| 5 |
dataTransfer.setData (Format, Daten) Fügt die angegebenen Daten hinzu. |
| 6 |
data = dataTransfer.getData (Format) Gibt die angegebenen Daten zurück. Wenn keine solchen Daten vorhanden sind, wird die leere Zeichenfolge zurückgegeben. |
| 7 |
dataTransfer.files Gibt eine Dateiliste der Dateien zurück, die gezogen werden, falls vorhanden. |
| 8 |
dataTransfer.setDragImage (Element, x, y) Verwendet das angegebene Element zum Aktualisieren der Drag-Rückmeldung und ersetzt alle zuvor angegebenen Rückmeldungen. |
| 9 |
dataTransfer.addElement (Element) Fügt das angegebene Element zum hinzu Liste der Elemente, die zum Rendern des Drag-Feedbacks verwendet werden. |
Drag & Drop-Prozess
Die Schritte zum Implementieren der Drag & Drop-Operation –
Schritt 1 – Ziehen eines Objekts ziehbar
Hier sind die Schritte, die ausgeführt werden müssen –
-
Wenn Sie ein Element ziehen möchten, müssen Sie das Attribut draggable für dieses Element auf true setzen.
-
Legen Sie einen Ereignis-Listener für Dragstart fest, der s speichert die Daten, die gezogen werden.
-
Der Dragstart des Ereignis-Listeners legt die zulässigen Effekte fest (Kopieren, Verschieben, Verknüpfen oder eine Kombination).
Das folgende Beispiel zeigt, wie ein Objekt ziehbar gemacht wird –
Dies führt zu folgendem Ergebnis:
Schritt 2 – Löschen des Objekts
Um einen Drop zu akzeptieren, muss das Drop-Ziel mindestens drei Ereignisse abhören.
-
Das Dragenter-Ereignis, mit dem bestimmt wird, ob das Drop-Ziel den Drop akzeptieren soll oder nicht . Wenn das Löschen akzeptiert werden soll, muss dieses Ereignis abgebrochen werden.
-
Das Dragover-Ereignis, mit dem festgelegt wird, welches Feedback dem Benutzer angezeigt werden soll. Wenn das Ereignis abgebrochen wird, wird das Feedback (normalerweise der Cursor) basierend auf dem Wert des dropEffect-Attributs aktualisiert.
-
Schließlich das Drop-Ereignis, das das tatsächliche Löschen ermöglicht
Das folgende Beispiel zeigt, wie ein Objekt in ein anderes Objekt verschoben wird –
Dies führt zu folgendem Ergebnis: