Erfahren Sie, wie Sie die HTML5-Drag & Drop-API verwenden

Die HTML5-Drag & Drop-Spezifikation (DnD), auch als HTML5-DnD-API bezeichnet, definiert den ereignisbasierten Drag & Drop-Mechanismus, mit dem ein visuelles Element mit einem Zeigegerät verschoben werden kann. Das Ziehen beinhaltet ein Maus-Abwärts-Ereignis, gefolgt von einem Maus-Verschiebungsereignis, und das Ablegen wird ausgelöst, wenn der Mauszeiger losgelassen wird. Eine interessante Einschränkung ist, dass die Spezifikation nicht genau definiert, was eine Drag & Drop-Operation tatsächlich ist, sondern besagt, dass eine Drag & Drop-Operation nach ihrer Implementierung einen Startpunkt haben muss (Mausklick oder Dateiauswahl) und sich dort befindet kann eine beliebige Anzahl von Zwischenschritten sein, es muss einen Endpunkt haben, an dem eine Maus oder ein Zeiger losgelassen wird, oder der Vorgang wird abgebrochen.

Browserunterstützung für DnD

Die Browserunterstützung für die HTML5-DnD-API ist unten aufgeführt. Weitere Informationen finden Sie unter Kann ich Drag & Drop verwenden:

  1. IE 10.0
  2. Firefox 18.0+
  3. Chrome 24.0+
  4. Safari 5.1+
  5. Opera 12.1+
Derzeit wird die DnD-API von keinem mobilen Browser unterstützt, und ein bekanntes Problem besteht bei Chrome, bei dem DataTransfer.addElement nicht implementiert ist. Die kurze Tabelle der Browserunterstützung ist in Abbildung B dargestellt:

Klicken um zu vergrößern.

DnD-Ereignisse

Es gibt eine Reihe von Ereignissen, die während des gesamten DnD-Prozesses angehängt werden können, und diese Ereignisse werden in verschiedenen Phasen des typischen Drag & Drop-Vorgangs ausgelöst. Beachten Sie, dass während der Ziehereignisse während des Ziehvorgangs keine Mausereignisse ausgelöst werden. Die sieben in der Spezifikation aufgeführten DnD-Ereignisse werden in der folgenden Tabelle angezeigt:

Veranstaltungen

Beschreibung

Dragstart Wird auf ein Element abgefeuert, wenn ein Ziehen gestartet wird. Während der Benutzer das Ziehen des Elements anfordert, wird das Dragstart-Ereignis ausgelöst, und während dieses Ereignisses würde ein Listener Informationen wie die Drag-Daten und das Bild festlegen, die dem Drag zugeordnet werden sollen.
Dragenter Wird ausgelöst, wenn die Maus zum ersten Mal über ein Element bewegt wird, während ein Ziehen 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. Dies ist auch das Ereignis, das Sie anhören müssen, wenn Sie eine Rückmeldung geben möchten, dass ein Ablegen zulässig ist, z. B. das Anzeigen einer Markierung oder eines Einfügemarkers.
drüber ziehen 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.
Dragleave Dieses Ereignis wird ausgelöst, wenn die Maus ein Element verlässt, während ein Ziehen auftritt. Zuhörer sollten alle Hervorhebungs- oder Einfügungsmarkierungen entfernen, die für das Drop-Feedback verwendet werden.
ziehen Dieses Ereignis wird an der Quelle des Ziehens ausgelöst, dh an dem Element, an dem der Ziehstart während des Ziehvorgangs ausgelöst wurde.
fallen 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. Dieses Ereignis wird nur ausgelöst, wenn ein Tropfen gewünscht wird. Es wird nicht ausgelöst, wenn der Benutzer den Ziehvorgang abgebrochen hat, z. B. durch Drücken der Escape-Taste, oder wenn die Maustaste losgelassen wurde, während sich die Maus nicht über einem gültigen Ablageziel befand.
Dragend Die Quelle des Ziehens erhält ein Ziehereignis, wenn der Ziehvorgang abgeschlossen ist, unabhängig davon, ob er erfolgreich war oder nicht.

DataTransfer-Objekteigenschaft

In der dataTransfer- Eigenschaft aller Drag-Ereignisse tritt der eigentliche Mechanismus hinter der API auf. Hier werden Daten zum Drag & Drop-Vorgang gespeichert. Die dataTransfer- Objekte werden während der Drag-and-Drop-Ereignisse verwendet und sind nur gültig, während diese Ereignisse ausgelöst werden. Die neun in der Spezifikation aufgeführten dataTransfer-Attribute und die zugehörigen Beschreibungen sind nachstehend aufgeführt:

DataTransfer-Objekt

Beschreibung

dataTransfer .dropEffect = Wert Gibt die aktuell ausgewählte Operation zurück. Wenn die Art der Operation nicht zu den Operationen gehört, die vom Attribut effectAllowed zugelassen werden, schlägt die Operation fehl. Kann eingestellt werden, um den ausgewählten Vorgang zu ändern

Die möglichen Werte sind "keine", "kopieren", "verknüpfen" und "verschieben".

dataTransfer.effectAllowed = Wert Gibt die Arten von Operationen zurück, die zulässig sein sollen. Kann festgelegt werden (während des Dragstart-Ereignisses), um die zulässigen Vorgänge zu ändern.

Die möglichen Werte sind "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all" und "uninitialized".

dataTransfer.items Gibt ein DataTransferItemList-Objekt mit den Ziehdaten zurück.
dataTransfer.setDragImage (Element, x, y) Verwendet das angegebene Element, um das Drag-Feedback zu aktualisieren und zuvor angegebenes Feedback zu ersetzen.
dataTransfer.types Gibt ein Array zurück, in dem die im Dragstart-Ereignis festgelegten Formate aufgelistet sind. Wenn Dateien gezogen werden, ist einer der Typen die Zeichenfolge "Dateien".
data = dataTransfer.getData (Format) Gibt die angegebenen Daten zurück. Wenn keine solchen Daten vorhanden sind, wird die leere Zeichenfolge zurückgegeben.
dataTransfer.setData (Format, Daten) Fügt die angegebenen Daten hinzu.
dataTransfer.clearData (Format) Entfernt die Daten der angegebenen Formate. Entfernt alle Daten, wenn das Argument weggelassen wird.
dataTransfer.files Gibt eine Dateiliste der Dateien zurück, die gezogen werden, falls vorhanden.

Online-Demonstrationen

Einige Orte bieten nette Demonstrationen des DnD in Aktion, einschließlich der Verwendung des Datei-Uploads, der auch die HTML5-Datei-API enthält. Nachfolgend sind einige Links zu den Demonstrationen aufgeführt:

  • HTML5-Drag & Drop-Datei-Upload mit Canvas - Diese Demo ist ein Beispiel für HTML5-Drag & Drop mit Datei-Upload und bietet die Möglichkeit, die Größe des hochgeladenen Bilds über HTML5-Canvas zu ändern, zuzuschneiden oder neu zu formatieren oder zu filtern, bevor es an den Server gesendet wird.
  • Microsoft Test Drive Magnetic Poetry - ist ein Beispiel für eine Site, die HTML5 Drag & Drop verwendet, um eine Erfahrung zu erstellen, für die zuvor ein Plug-In oder eine JavaScript-Bibliothek erforderlich gewesen wäre.
  • Implementieren der HTML5-Demo für Drag & Drop-Einkaufswagen - Diese Demo zeigt ein Beispiel für die Implementierung von nativem Drag & Drop zum Erstellen einer einfachen Warenkorboberfläche.
  • Drag'n Drop - Towers of Hanoi - Im Mozilla Developers Network vorgestellt, verwendet es die DnD-API, um das beliebte klassische Spiel "Towers of Hanoi" zusammen mit einigen CSS3-Zeilen für Schatten, Verläufe, Positionierung und Rahmen zu implementieren Radius. Die Spieldemo ist in Abbildung C dargestellt:

Abbildung C.

Beispiel für einen Code-Ausschnitt

Dieses Code-Snippet unten, geändert von Tutorials Point - HTML5 Drag & Drop, zeigt ein einfaches Beispiel für das Ziehen eines lila Felds in ein rosa Feld, wie in Abbildung D (das Klicken), Abbildung E (das Ziehen) und gezeigt Abbildung F (der "Tropfen").
 Funktion dragStart (ev) { 
 ev.dataTransfer.effectAllowed = 'move'; 
 ev.dataTransfer.setData ("Text", ev.target.getAttribute ('id')); 
 ev.dataTransfer.setDragImage (ev.target, 0, 0); 
 return true; 
 }} 
 Funktion dragEnter (ev) { 
 event.preventDefault (); 
 return true; 
 }} 
 Funktion dragOver (ev) { 
 falsch zurückgeben; 
 }} 
 Funktion dragDrop (ev) { 
 var src = ev.dataTransfer.getData ("Text"); 
 ev.target.appendChild (document.getElementById (src)); 
 ev.stopPropagation (); 
 falsch zurückgeben; 
 }} 
 Versuchen Sie, die lila Box in die rosa Box zu verschieben. 
 ondrop = "return dragDrop (event)" 
 ondragover = "return dragOver (event)"> Mülleimer 
 ondragstart = "return dragStart (event)"> 

Zieh mich

Abbildung D.

Abbildung E.

Abbildung F.

Andere Ressourcen

  • Drag & Drop im Mozilla Developer Network - Firefox und andere Mozilla-Anwendungen unterstützen eine Reihe von Funktionen für die Handhabung von Drag & Drop.
  • Dev.Opera HTML5 Drag & Drop - Beschreibt, auf welche Weise der Opera-Browser die DnD-API unterstützt.
  • HTML5.1 Nightly Editors Draft - Drag & Drop - Das nächtliche Update des neuesten Entwurfs des HTML5-Editors.
  • Drag & Drop für Android-Entwickler - Kein Beispiel für HTML5, aber es ist das Drag & Drop-Framework für Android, mit dem Benutzer Daten auf Android-Geräten und Browsern von einer Ansicht in eine andere Ansicht verschieben können.

© Copyright 2021 | mobilegn.com