Ziehen und Ablegen von JavaScript

Zusammenfassung: In diesem Lernprogramm erfahren Sie mehr über die JavaScript-Drag & Drop-API.

Einführung zu JavaScript Drag & Drop API

HTML5 hat die Drag & Drop-Spezifikation offiziell eingeführt. Die meisten modernen Webbrowser haben natives Drag & Drop basierend auf der HTML5-Spezifikation implementiert.

Standardmäßig können nur Bilder und Text ziehbar sein. Um ein Bild zu ziehen, halten Sie einfach die Maustaste gedrückt und bewegen es dann. Um den Text zu ziehen, müssen Sie Text markieren und auf die gleiche Weise ziehen wie ein Bild.

Die HTML5-Spezifikation gibt an, dass fast alle Elemente ziehbar sind. Um ein Element ziehbar zu machen, fügen Sie seinem HTML-Tag die Eigenschaft draggable mit dem Wert true hinzu. Beispiel:

Code language: HTML, XML (xml)

Ereignisse auf ziehbaren Elementen

Wenn Sie ein Element ziehen, werden diese Ereignisse in der folgenden Reihenfolge ausgelöst:

• dragstart
• drag
• dragend

Wenn Sie eine Maustaste gedrückt halten und die Maus bewegen, wird das Ereignis dragstart auf das ziehbare Element ausgelöst dass du ziehst. Der Cursor ändert sich in ein No-Drop-Symbol (ein Kreis mit einer Linie), um anzuzeigen, dass Sie das Element nicht auf sich selbst ablegen können.

Nach dem dragstart Wenn ein Ereignis ausgelöst wird, wird das Ereignis drag wiederholt ausgelöst, solange Sie das Element ziehen.

Und das Ereignis dragend wird ausgelöst Wenn Sie das Ziehen des Elements beenden.

Das Ziel aller Ereignisse (e.target) ist das Element, das gezogen wird.

Standardmäßig Der Browser ändert das Erscheinungsbild des gezogenen Elements nicht. Daher können Sie das Erscheinungsbild gemäß Ihren Einstellungen anpassen.

Ereignisse auf Ablagezielen

Wenn Sie ein Element über ein gültiges Ablageziel ziehen, werden diese Ereignisse in der folgenden Reihenfolge ausgelöst:

• dragenter
• dragover
• dragleave oder drop

Das Ereignis dragenter wird sofort ausgelöst Wenn Sie das Element über ein Ablageziel ziehen.

Nachdem das Ereignis dragenter ausgelöst wurde, wird das Ereignis dragover wiederholt ausgelöst Solange Sie das Element innerhalb der Grenze des Ablageziels ziehen.

Wenn Sie das Element außerhalb der Grenze des Ablageziels ziehen, wird die dragover Ereignis wird nicht mehr ausgelöst und das Ereignis dragleave wird ausgelöst.

Wenn Sie das Element auf dem Ziel ablegen, wird drop Ereignis wird anstelle des Ereignisses dragleave ausgelöst.

Das Ziel ( ) der dragenter, dragover, dragleave und drop Ereignisse sind die Drop-Zielelemente.

Gültiges Drop-Ziel

Fast alle Elemente unterstützen die Drop-Zielereignisse (dragenter, dragover, dragleave und drop). Standardmäßig ist das Löschen jedoch nicht zulässig.

Wenn Sie ein Element über einem Ablageziel ablegen, das nicht gelöscht werden kann, hat das Ereignis drop gewonnen t fire.

Um ein Element in ein gültiges Drop-Ziel zu verwandeln, können Sie das Standardverhalten von dragenter und dragover -Ereignisse durch Aufrufen der Methode event.preventDefault() in den entsprechenden Ereignishandlern. (Weitere Informationen finden Sie im Beispielabschnitt.)

Daten mit dem dataTransfer-Objekt übertragen

Um Daten per Drag & Drop zu übertragen, verwenden Sie die Objekt.

Das dataTransfer Objekt ist eine Eigenschaft des Ereignisses. Sie können Daten vom gezogenen Element zum Ablageziel übertragen.

Das Objekt dataTransfer verfügt über zwei Methoden: setData() und getData().

Mit setData() können Sie die Daten des Ziehvorgangs auf das angegebene Format und die angegebenen Daten einstellen :

Code language: CSS (css)

Das Format kann text/plain oder text/uri-list sein. Die Daten können eine Zeichenfolge sein, die die Daten darstellt, die dem Drag-Objekt hinzugefügt werden sollen.

Die Methode getData() ruft die von der -Methode.

Die getData() akzeptiert ein Argument:

Das Format kann text/plain oder text/uri-list sein. Die getData() gibt eine Zeichenfolge zurück, die mit der Methode setData() gespeichert wurde, oder eine leere Zeichenfolge, wenn die Ziehoperation keine Daten enthält.

JavaScript-Drag & Drop-Beispiel

Wir werden die folgende einfache Drag & Drop-Anwendung entwickeln, um die JavaScript-Drag & Drop-API zu demonstrieren:

Erstellen Sie die Projektstruktur

Erstellen Sie zunächst einen neuen Ordner mit dem Namen drag-n-drop-basics. Erstellen Sie in diesem Ordner zwei Unterordner mit den Namen css und js.

Erstellen Sie anschließend eine neue Datei mit dem Namen app.js im Ordner js, style.css im Ordner css und index.html im Ordner drag-n-drop-basics.

Platzieren Sie drittens den Link zur style.css und Skript-Tag, das mit app.js in der Datei index.html wie folgt verknüpft ist:

Erstellen Sie die Datei index.html

Fügen Sie den folgenden Code in die Datei index.html ein:

In dieser Datei index.html Wir haben das .container -Element verwendet, um die Überschrift und das drop-targets -Element auszurichten.

Innerhalb des Drop-Targets-Elements haben wir platzierte drei div Elemente mit derselben Klasse box. Und wir platzieren ein weiteres div-Element mit der Klasse item im ersten Feld.

Wenn Sie das index.html und öffnen Wenn Sie versuchen, das gelbe Feld zu ziehen, zeigt der Cursor an, dass Sie nicht ziehen können:

Um das Element ziehbar zu machen, fügen Sie die Eigenschaft draggable mit dem Wert true hinzu zu seinem HTML-Tag wie folgt:

Code language: JavaScript (javascript)

Wenn Sie nun die index.html speichern, öffnen Sie sie im Browser Sie werden erneut sehen, dass Sie das Elementelement wie folgt ziehen können:

Ereignisse für das ziehbare Element behandeln

Die Datei style.css hat die .hide Klasse, die ein Element verbirgt:

Code language: CSS (css)

In der Datei app.js fügen Sie den folgenden Code hinzu:

Wie ich Es funktioniert:

• Wählen Sie zuerst das ziehbare Element mit querySelector() aus.
• Zweitens fügen Sie eine Ereignishandler für das ziehbare Element.
• Definieren Sie drittens die Funktion dragStart(), um die dragstart Ereignis.

Wenn Sie die Datei index.html öffnen und mit dem Ziehen des ziehbaren Elements beginnen, wird die Meldung drag starts... in angezeigt die Konsole.

Im Ereignishandler dragStart müssen Sie die id des ziehbaren Elements speichern. Und Sie müssen es ausblenden:

Wenn Sie das Element ziehen, werden Sie feststellen, dass es verschwindet, sobald Sie mit dem Ziehen beginnen.

Um dies zu lösen, verwenden Sie die setTimeout() -Funktion:

Jetzt können Sie das ziehbare Element aus seiner ursprünglichen Position ziehen:

Ereignisse auf Ablagezielen behandeln

Die Datei style.css verfügt auch über eine CSS-Klasse mit dem Namen .drag-over, das den Rahmenstil des Ablageziels in gestrichelt und rot umwandelt:

Code language: CSS (css)

In der app.js benötigen Sie um die Drop-Zielelemente auszuwählen und die dragenter, dragover, dragleave und drop Ereignisse dieser Elemente:

Der Rahmenstil des Ablageziels sollte sich ändern, wenn dragenter und dragover Ereignis tritt auf. Der Stil sollte wiederhergestellt werden, wenn das Ereignis dragleave und drop auftritt.

Dazu fügen Sie es hinzu und entfernen es Die drag-over -Klasse zum drop -Ziel lautet wie folgt:

Wenn Sie nun das ziehbare Element in einen anderen Drop ziehen Ziel sehen Sie, dass sich der Rand des Ablageziels wie im folgenden Bild gezeigt ändert:

Um das Drop-Ziel gültig zu machen, müssen Sie event.preventDefault() im dragenter und dragover Ereignishandler wie folgt:

Wenn Sie dies nicht tun, wird das Ereignis drop niemals ausgeführt Feuer, weil das Element div standardmäßig kein gültiges Ablageziel ist.

Wenn Sie das ziehbare Element auf ein Ablageziel ziehen, wird der Cursor angezeigt Änderungen, die darauf hinweisen, dass Sie das Element löschen können:

Wenn Sie das Element item jetzt löschen, wird es sofort ausgeblendet.

Um dies zu lösen Problem, müssen Sie Handle das Ereignis drop hinzufügen.

• Rufen Sie zuerst die id des ziehbaren Elements mit der getData() -Methode der dataTransfer Objekt.
• Fügen Sie zweitens das ziehbare Element als untergeordnetes Element des Drop-Zielelements hinzu.
• Entfernen Sie drittens das hide -Klasse aus dem draggable -Element.

Der folgende Code zeigt die vollständige drop Ereignishandler:

Wenn Sie das ziehbare Element jetzt ziehen und ablegen, sollte es wie erwartet funktionieren.

Im Folgenden wird die vollständige Datei app.js angezeigt:

Und hier ist der Link zur Demo.

Zusammenfassung

• Fügen Sie die Eigenschaft draggable mit dem Wert true hinzu zu einem Element, um es ziehbar zu machen.
• Die dragstart, drag und dragend Ereignisse werden auf das ziehbare Element ausgelöst.
• Die dragenter, dragover, oder drop Ereignisse werden auf dem Ablageziel ausgelöst.
• Rufen Sie die event.preventDefault() auf dem auf dragenter und dragover Ereignishandler, um ein Element zu einem gültigen Ablageziel zu machen.
• Verwenden Sie die event.dataTransfer -Objekt mit den Methoden setData() und getData() zum Übertragen von Daten beim Ziehen und Ablegen.