Einführung
Drag & Drop ist eine häufige Benutzerinteraktion, die Sie in vielen grafischen Benutzeroberflächen finden.
Es gibt bereits vorhandene JavaScript-Bibliotheken zum Hinzufügen einer Drag & Drop-Funktion zu Ihrer App. Es kann jedoch Situationen geben, in denen eine Bibliothek nicht verfügbar ist oder ein Overhead oder eine Abhängigkeit entsteht, die Ihr Projekt nicht benötigt. In diesen Situationen kann die Kenntnis der APIs, die Ihnen in modernen Webbrowsern zur Verfügung stehen, alternative Lösungen bieten.
Die HTML-Drag & Drop-API stützt sich auf das Ereignismodell des DOM, um Informationen darüber zu erhalten, was gezogen oder abgelegt wird um dieses Element per Drag & Drop zu aktualisieren. Mit JavaScript-Ereignishandlern können Sie jedes Element in ein ziehbares Element oder ein Element verwandeln, in das Sie einfügen können.
In diesem Lernprogramm erstellen wir ein Drag-and-Drop-Beispiel mithilfe von HTML-Drag & Drop API mit Vanille-JavaScript zur Verwendung der Ereignishandler.
Voraussetzungen
Um dieses Lernprogramm abzuschließen, benötigen Sie:
- Einen modernen Webbrowser, der dies unterstützt die Drag & Drop-API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Schritt 1 – Erstellen des Projekts und anfängliches Markup
Unser Projekt besteht aus einem Container mit zwei Arten von untergeordneten Elementen:
- Untergeordnete Elemente, die Sie ziehen können
- Untergeordnete Elemente, in die Elemente eingefügt werden können
Öffnen Sie zunächst Ihr Terminalfenster und erstellen Sie ein neues Projektverzeichnis:
Navigieren Sie anschließend zu diesem Verzeichnis:
Erstellen Sie anschließend eine index.html -Datei in diesem Verzeichnis:
Fügen Sie als Nächstes den Code für eine HTML-Webseite hinzu:
Und zwischen <body> -Tags fügen Sie Ihr draggable -Element und Ihr dropzone (Ziel löschen) hinzu:
Speichern und schließen Sie die Datei. Erstellen Sie dann eine style.css -Datei:
Fügen Sie als Nächstes Stile für die Elemente in unserer index.html Datei:
Dadurch wird der App eine Formatierung hinzugefügt. Jetzt können Sie index.html im Browser anzeigen und feststellen, dass dies ein draggable <div> und erzeugt a dropzone <div>.
Als nächstes machen wir das erste <div> explizit ziehbar, indem wir das Attribut draggable hinzufügen:
Speichern und schließen Sie die Datei.
Zeigen Sie abschließend index.html erneut im Browser an. Wenn wir auf draggable <div> klicken und es über den Bildschirm ziehen, sollte es eine visuelle Anzeige dafür geben, dass es sich bewegt.
Der Standardwert für das Attribut draggable ist auto. Das heißt, ob das Element ziehbar ist, hängt vom Standardverhalten Ihres Browsers ab. In der Regel bedeutet dies, dass Textauswahlen, Bilder und Links ohne Angabe von draggable="true" ziehbar sind.
Sie haben jetzt eine HTML-Datei mit einem ziehbaren Element. Wir werden mit dem Hinzufügen von onevent -Handlern fortfahren.
Schritt 2 – Behandeln von Drag & Drop-Ereignissen mit JavaScript
Derzeit, wenn wir Lassen Sie die Maus los, während Sie das ziehbare Element ziehen. Es passiert nichts. Um eine Aktion beim Ziehen oder Ablegen von DOM-Elementen auszulösen, müssen Sie die Drag & Drop-API verwenden:
-
ondragstart: Dieser Ereignishandler wird an unserdraggable-Element angehängt und ausgelöst, wenn eindragstart-Ereignis auftritt. -
ondragover: Dieser Ereignishandler wird an unserdropzone-Element angehängt und ausgelöst, wenn eindragover-Ereignis auftritt. -
ondrop: Dieser Ereignishandler wird auch an unserdropzone-Element angehängt und ausgelöst, wenn eindropEreignis tritt auf.
Hinweis: Insgesamt gibt es acht Ereignishandler: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart und ondrop. In unserem Beispiel benötigen wir nicht alle.
Verweisen wir zunächst auf eine neue https://www.digitalocean.com/community/tutorials/script.js -Datei in unserer index.html:
Erstellen Sie als Nächstes eine neue https://www.digitalocean.com/community/tutorials/script.js Datei:
Das Objekt DataTransfer verfolgt die Informationen zum aktuellen Ziehen. Um unser Element beim Ziehen und Ablegen zu aktualisieren, müssen wir direkt auf das Objekt DataTransfer zugreifen.Dazu können wir die Eigenschaft dataTransfer aus der DragEvent des DOM-Elements auswählen.
Hinweis: Die DataTransfer Objekt kann technisch Informationen für mehrere Elemente verfolgen, die gleichzeitig gezogen werden. In unserem Beispiel konzentrieren wir uns auf das Ziehen eines Elements.
Die setData -Methode des dataTransfer -Objekts kann verwendet werden, um die Informationen zum Ziehstatus für Ihr aktuell gezogenes Element festzulegen. Es werden zwei Parameter benötigt:
- eine Zeichenfolge, die das Format des zweiten Parameters
- der tatsächlich übertragenen Daten deklariert
Unser Ziel besteht darin, unser draggable -Element in ein neues übergeordnetes Element zu verschieben. Wir müssen in der Lage sein, unser draggable -Element mit einem eindeutigen id auszuwählen. Wir können die id des gezogenen Elements mit der setData -Methode festlegen, damit sie später verwendet werden kann.
Lassen Sie uns Besuchen Sie unsere Datei https://www.digitalocean.com/community/tutorials/script.js erneut und erstellen Sie eine neue Funktion zur Verwendung von setData:
Hinweis: Internet Explorer 9 bis 11 haben Berichten zufolge Probleme mit der Verwendung von "text/plain". Das Format muss für diesen Browser "text" sein.
Um das CSS-Styling des gezogenen Elements zu aktualisieren, können wir über das DOM-Ereignis erneut und über auf seine Stile zugreifen Festlegen der gewünschten Stile für currentTarget.
Fügen wir unserer Funktion hinzu und ändern Sie die backgroundColor in yellow:
Hinweis: Alle von Ihnen geänderten Stile müssen erneut manuell aktualisiert werden auf Drop, wenn Sie nur Drag-Stile möchten. Wenn Sie beim Ziehen etwas ändern, behält das gezogene Element dieses neue Design bei, es sei denn, Sie ändern es wieder.
Jetzt haben wir unsere JavaScript-Funktion für den Beginn des Ziehens.
Wir können ondragstart zum draggable -Element in index.html hinzufügen:
Zeigen Sie index.html in Ihrem Browser an. Wenn Sie jetzt versuchen, Ihren Artikel zu ziehen, wird das in unserer Funktion deklarierte Styling angewendet:
Es wird jedoch nichts passieren Wenn Sie den Klick loslassen.
Der nächste in dieser Sequenz ausgelöste Ereignishandler ist ondragover.
Das Standard-Drop-Verhalten für bestimmte DOM-Elemente wie <div> s in Browsern akzeptiert normalerweise kein Löschen. Dieses Verhalten fängt das Verhalten ab, das wir zu implementieren versuchen. Um sicherzustellen, dass wir das gewünschte Drop-Verhalten erhalten, wenden wir preventDefault an.
Lassen Sie uns die Datei https://www.digitalocean.com/community/tutorials/script.js und erneut besuchen Erstellen Sie eine neue Funktion, um preventDefault zu verwenden. Fügen Sie diesen Code am Ende der Datei hinzu:
Nun, Wir können ondragover zu unserem dropzone -Element in index.html hinzufügen:
Zu diesem Zeitpunkt haben wir noch keinen Code geschrieben, der das eigentliche Löschen behandelt. Der letzte in dieser Sequenz ausgelöste Ereignishandler ist ondrop.
Lassen Sie uns unsere https://www.digitalocean.com/community/tutorials/script.js -Datei erneut besuchen und eine neue Funktion erstellen
Wir können auf die zuvor gespeicherten Daten mit der setData -Methode des dataTransfer -Objekts verweisen. Wir werden die getData -Methode des dataTransfer -Objekts verwenden. Die Daten, die wir festgelegt haben, waren id. Das wird also an uns zurückgegeben:
Wählen Sie unser draggable -Element mit dem id aus, das wir abgerufen haben:
Wählen Sie unsere dropzone Element:
Fügen Sie unsere draggable Element für das dropzone:
Setzen Sie unser dataTransfer -Objekt zurück:
Jetzt können wir ondrop zu unserem dropzone -Element in :
Sobald dies erledigt ist, haben wir eine abgeschlossene Drag & Drop-Funktion. Zeigen Sie index.html in Ihrem Browser an und ziehen Sie das Element draggable auf das dropzone. P. >
In unserem Beispiel wird das Szenario eines einzelnen ziehbaren Elements und eines einzelnen Ablageziels behandelt. Sie können mehrere ziehbare Elemente und mehrere Drop-Ziele haben und diese mit allen anderen Drag & Drop-API-Ereignishandlern anpassen.
Schritt 3 – Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen
Hier ist ein weiteres Beispiel für die Verwendung dieser API: eine Aufgabenliste mit ziehbaren Aufgaben, aus denen Sie wechseln können eine "To-do" -Spalte in eine "Done" -Spalte.
Um eine eigene Aufgabenliste zu erstellen, fügen Sie weitere ziehbare Elemente mit der eindeutigen id s bis index.html:
Zeigen Sie index.html in Ihrem an Browser und ziehen Sie die Elemente in der Spalte „Aufgaben“ in die Spalte „Fertig“. Sie haben eine Aufgabenanwendung erstellt und die Funktionalität getestet.
Fazit
In diesem Artikel haben Sie eine Aufgabenanwendung erstellt, um die Drag & Drop-Funktionalität zu untersuchen Für moderne Webbrowser verfügbar.
Die Drag & Drop-API bietet mehrere Optionen zum Anpassen Ihrer Aktionen über das Ziehen und Ablegen hinaus. Sie können beispielsweise das CSS-Design Ihrer gezogenen Elemente aktualisieren. Anstatt das Element zu verschieben, können Sie Ihr ziehbares Element auch so kopieren, dass es beim Ablegen repliziert wird.
Beachten Sie, dass viele Webbrowser diese Technologie zwar unterstützen, Sie sich jedoch möglicherweise nicht darauf verlassen können Wenn Ihre Zielgruppe aus Geräten besteht, die diese Funktionalität nicht unterstützen.
Weitere Informationen zu allem, was Sie mit der Drag & Drop-API löschen können, finden Sie in den MDN-Dokumenten.