Verwenden der HTML5-Drag & Drop-API

Mit der HTML5-Drag & Drop-API (DnD) können wir fast jedes Element auf unserer Seite ziehbar machen. In diesem Beitrag werden die Grundlagen von Drag erläutert und Löschen.

Erstellen von ziehbaren Inhalten #

Es ist erwähnenswert, dass in den meisten Browsern Textauswahlen, Bilder und Links standardmäßig ziehbar sind Das Google-Logo in der Google-Suche zeigt das Geisterbild an. Das Bild kann dann in der Adressleiste, einem <input type="file" /> -Element oder sogar auf dem Desktop abgelegt werden, um andere Arten von Inhalten ziehbar zu machen Sie müssen die HTML5-DnD-APIs verwenden.

Um ein Objekt ziehbar zu machen, setzen Sie draggable=true auf dieses Element. Nur alles kann durch Ziehen aktiviert werden, Bilder, Dateien , Links, Dateien oder andere Markups auf Ihrer Seite.

In unserem Beispiel erstellen wir eine Schnittstelle zum Neuanordnen einiger Spalten, die mit CSS Grid erstellt wurden. Das grundlegende Markup für meine Spalten sieht so aus dies, wobei jede Spalte das

Attribut auftruegesetzt.

Hier ist das CSS für meine Container- und Box-Elemente. Beachten Sie, dass dies das einzige CSS ist Im Zusammenhang mit der DnD-Funktionalität steht die Eigenschaft cursor: move. Der Rest des Codes steuert lediglich das Layout und das Design der Container- und Box-Elemente.

An dieser Stelle werden Sie Stellen Sie fest, dass Sie die Elemente ziehen können, es passiert jedoch nichts anderes. Um die DnD-Funktionalität hinzuzufügen, müssen Sie die JavaScript-API verwenden.

Auf Drag-Ereignisse warten #

Es gibt eine Nummer von verschiedenen Ereignissen, an die zur Überwachung des gesamten Drag & Drop-Prozesses angehängt werden soll.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Um den DnD-Fluss zu verarbeiten, benötigen Sie eine Art Quellelement (woher der Widerstand stammt), die Daten pa yload (was Sie löschen möchten) und ein Ziel (ein Bereich, in dem das Ablegen abgefangen werden soll). Das Quellelement kann ein Bild, eine Liste, ein Link, ein Dateiobjekt, ein HTML-Block usw. sein. Das Ziel ist die Ablagezone (oder eine Reihe von Ablagezonen), die die Daten akzeptieren, die der Benutzer zu löschen versucht. Beachten Sie, dass nicht alle Elemente Ziele sein können, z. B. kann ein Bild kein Ziel sein.

Starten und Beenden Drag & Drop-Sequenz #

Wenn Sie draggable="true" -Attribute für Ihren Inhalt definiert haben, fügen Sie einen dragstart -Ereignishandler hinzu um die DnD-Sequenz für jede Spalte zu starten.

Mit diesem Code wird die Deckkraft der Spalte auf 40% festgelegt, wenn der Benutzer mit dem Ziehen beginnt, und am Ende des Ziehereignisses auf 100% zurückgesetzt.

Das Ergebnis ist in der folgenden Glitch-Demo zu sehen. Ziehen Sie ein Element und es wird undurchsichtig. Da das Ziel des Ereignisses dragstart das Quellelement ist, gibt der Benutzer this.style.opacity auf 40% visuelle Rückmeldung, dass das Element die aktuelle Auswahl ist, die verschoben wird. Sobald Sie das Element löschen, kehrt das Quellelement zu 100% Deckkraft zurück, obwohl die Ablagefunktion nicht vorhanden ist.

Fügen Sie zusätzliche visuelle Hinweise mit Dragenter, Dragover und Dragleave hinzu. #

Verwenden Sie die dragenter, dragover und dragleave Ereignishandler. In diesem Beispiel sind die Spalten nicht nur ziehbar, sondern auch Drop-Ziele. Helfen Sie dem Benutzer Um dies zu verstehen, wird der Rahmen gestrichelt, da er ein gezogenes Element über eine Spalte enthält. Beispielsweise können Sie in Ihrem CSS eine over -Klasse erstellen, um Elemente darzustellen, die Drop-Ziele sind:

Dann in Ihrem J. avaScript richtet die Ereignishandler ein, fügt die Klasse over hinzu, wenn die Spalte gezogen wird, und entfernt sie, wenn wir sie verlassen. In der dragend Handler Wir stellen außerdem sicher, dass die Klassen am Ende des Ziehens entfernt werden.

Dieser Code enthält einige Punkte, die es wert sind, behandelt zu werden :

• Wenn Sie so etwas wie einen Link ziehen, müssen Sie das Standardverhalten des Browsers verhindern, nämlich zu diesem Link zu navigieren. Rufen Sie dazu im Ereignis dragover. Eine weitere bewährte Methode besteht darin, false in demselben Handler zurückzugeben.
• Mit der Ereignishandler dragenter wird die Klasse over anstelle von dragover umgeschaltet Wenn Sie dragover verwenden, wird die CSS-Klasse mehrmals umgeschaltet, wenn das Ereignis dragover weiterhin auf einen Spaltenhover ausgelöst wird. das würde das verursachen Der Renderer des Browsers erledigt eine große Menge unnötiger Arbeit. Es ist immer eine gute Idee, das Neuzeichnen auf ein Minimum zu beschränken.Wenn Sie das Ereignis dragover für etwas verwenden müssen, sollten Sie Ihren Ereignis-Listener drosseln oder entprellen.

Vervollständigen des Drop #

Um den tatsächlichen Abwurf zu verarbeiten, fügen Sie einen Ereignis-Listener für das Ereignis drop hinzu. Im Handler drop müssen Sie dies verhindern Das Standardverhalten des Browsers für Löschvorgänge, das normalerweise eine nervige Umleitung darstellt. Sie können verhindern, dass das Ereignis das DOM in die Luft sprudelt, indem Sie e.stopPropagation() aufrufen.

Wenn Sie den Code an dieser Stelle ausführen, wird das Element nicht an den neuen Speicherort verschoben. Um dies zu erreichen, müssen Sie die DataTransfer Objekt.

In der Eigenschaft dataTransfer geschieht die gesamte DnD-Magie. Sie enthält die Daten, die in einer Ziehaktion gesendet wurden. dataTransfer wird im Ereignis dragstart festgelegt und im Drop-Ereignis gelesen / behandelt. Wenn Sie e.dataTransfer.setData(mimeType, dataPayload) aufrufen, können Sie das Objekt festlegen „s MIME-Typ und Datennutzlast.

In diesem Beispiel ermöglichen wir Benutzern, die Reihenfolge der Spalten neu zu ordnen. Dazu müssen Sie beim Ziehen zuerst den HTML-Code des Quellelements speichern startet:

Im drop -Ereignis, das Sie verarbeiten Wenn Sie die Spalte löschen, setzen Sie den HTML-Code der Quellspalte auf den HTML-Code der Zielspalte, auf die Sie abgelegt haben, und überprüfen Sie zunächst, ob der Benutzer nicht auf dieselbe Spalte zurückfällt, aus der er gezogen hat.

Sie können sehen Das Ergebnis in der folgenden Demo. Ziehen Sie die A-Spalte über der B-Spalte heraus und lassen Sie sie los. Beachten Sie, wie sie die Positionen wechseln:

Mehr Ziehen von Eigenschaften #

Das Objekt dataTransfer macht Eigenschaften verfügbar, um dem Benutzer während des Ziehvorgangs visuelles Feedback zu geben. Diese Eigenschaften können auch verwendet werden, um zu steuern, wie jedes Ablageziel festgelegt wird reagiert auf einen bestimmten Datentyp.

• dataTransfer.effectAllowed einschränken Dies ist die Art des Ziehens, die der Benutzer an dem Element ausführen kann. Es wird im Drag-and-Drop-Verarbeitungsmodell verwendet, um die dropEffect während der und dragover Ereignisse. Die Eigenschaft kann auf die folgenden Werte festgelegt werden: none, copy, copyLink, copyMove, link, linkMove, move, all und uninitialized.
• dataTransfer.dropEffect steuert das Feedback, das der Benutzer während der dragenter und dragover events.Wenn der Benutzer mit der Maus über ein Zielelement fährt, zeigt der Cursor des Browsers an, welche Art von Operation stattfinden wird (z eine Kopie, eine Verschiebung usw.) Der Effekt kann einen der folgenden Werte annehmen: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) bedeutet, dass anstelle der Verwendung des Browsers “ Als Standard-Feedback für „Geisterbilder“ können Sie optional ein Drag-Symbol festlegen.

Hochladen von Dateien per Drag & Drop #

In diesem einfachen Beispiel wird eine Spalte als beides verwendet Drag Source und Drag Target. Dies wird möglicherweise in einer Benutzeroberfläche angezeigt, in der der Benutzer aufgefordert wird, die Elemente neu anzuordnen. In einigen Situationen können sich Drag Target und Source unterscheiden, z. B. in einer Benutzeroberfläche, in der der Benutzer ein Bild auswählen muss Hauptbild für ein Produkt durch Ziehen des ausgewählten Bilds auf ein Ziel.

Drag & Drop wird häufig verwendet, damit Benutzer Elemente von ihrem Desktop in eine Anwendung ziehen können. Der Hauptunterschied liegt in Ihrer drop -Handler. Statt dataTransfer.getData() zu verwenden, um auf die Dateien zuzugreifen, werden deren Daten wi wird in der Eigenschaft dataTransfer.files enthalten sein:

Weitere Informationen hierzu finden Sie unter Benutzerdefiniertes Ziehen und Ablegen.