HTML5-Drag & Drop leicht gemacht: Erstellen von HTML5-Draggable-Objekten

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:

Beispiel

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:

Beispiel

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():

Beispiel

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.

Browserunterstützung

Chrome

46+

Edge

Alle

Firefox

3.5+

IE

10+

Opera

Alle

Safari

3.1+

Mobiler Browser Unterstützung

Chrome

Firefox

Alle

Opera

Safari

Leave a Reply

Schreibe einen Kommentar

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