Ziehen und Ablegen von HTML-Elementen und-Dateien mit Javascript
Um einen Drop-Effekt zu definieren, müssen die folgenden Schritte ausgeführt werden:
5.1. Bestimmen Sie die zulässigen Drop-Effekte für das ziehbare Element im Dragstart-Ereignishandler
Mit der Eigenschaft effectAllowed für die Ereigniseigenschaft DataTransfer definieren Sie alle Drop-Effekte, die für dieses ziehbare Element angewendet werden dürfen.
Dies geschieht, da verschiedene Drop-Positionen definiert und verschiedene Drop-Effekte pro Drop-Position behandelt werden können.,
Die folgende Tabelle definiert die möglichen effectAllowed Eigenschaftswerte basierend auf MDN docs:
5.2. Definieren Sie für jeden Drop-Speicherort die Drop-Effekte dafür im Dragover-Ereignishandler
Der zu definierende Drop-Effekt muss einer der zulässigen Effekte sein, die im Dragstart-Ereignishandler des Quellorts festgelegt wurden.,
Wenn ein Drop-Effekt nicht einer der erlaubten Drop-Effekte ist, wird er auf einen der erlaubten Drop-Effekte gesetzt.
Der Dragover-Handler, in dem der Drop-Effekt definiert werden soll, wird ausgeführt, wenn das gezogene Element über eine mögliche Drop-Position gezogen wird.
Das Folgende ist ein Beispiel für die Definition der Drop-Effekte für eine bestimmte Drop-Position.
6) Definieren Sie eine Drop-Zone (Drop-Position)
Standardmäßig erlaubt kein Element im HTML-Dokument ein Drop., Dies kann jedoch geändert werden, und um ein Element zu einer Drop-Zone zu machen, muss es Folgendes haben:
- Der ondragover-Ereignishandler, der ausgeführt wird, wenn das ziehbare Element über dieses Element gezogen wird. In diesem Ereignishandler wird der Drop-Effekt der Drop-Position wie zuvor in Schritt 5.2 beschrieben definiert.
- Der Ondrop-Ereignishandler, der ausgeführt wird, wenn das ziehbare Element an der Ziehposition/Zone abgelegt wird.
Das Folgende ist ein Beispiel für die Definition eines Elements als Drop-Position.,
Sowohl im Dragover-als auch im Drop-Ereignishandler muss preventDefault() aufgerufen werden, um ein Drop zuzulassen, da dies anzeigt, dass ein Drop an diesem Ort zulässig ist.
Wenn ein Drop nur in bestimmten Situationen zulässig ist, in denen Bedingungen verwendet werden, fügen Sie preventDefault nur hinzu, wenn die Bedingungen für das Zulassen eines Drop erfüllt sind. Dies geschieht, um zu verhindern, dass das Element eine Drop-Zone ist, wenn die Bedingungen nicht erfüllt sind, in denen drop nicht zulässig sein sollte.,
Das Ablehnen eines Drop basierend auf dem Typ der Drag-Daten in der Eigenschaft DataTransfer ist ein häufiger Fall. Das folgende Beispiel zeigt, dass nur Links im Drop Zone-Element mit dem Dragover-Handler abgelegt werden dürfen.
7) Behandeln Sie das Drop des Elements
Während des Drop-Ereignisses sollten die Drag-Daten verarbeitet werden. Dazu wird die Methode getData () für die Ereigniseigenschaft DataTransfer verwendet.,
Die Methode getData () ruft die Drag-Elemente ab, da sie ein einzelnes Argument des abzurufenden Datentyps verwendet und den damit verbundenen Zeichenfolgenwert zurückgibt.
Die Eigenschaften allowedEffect und dropEffect steuern das Feedback, das dem Benutzer angezeigt wird.
Der Umgang mit solchen Rückmeldungen liegt in der Verantwortung des Entwicklers und sollte im Drop-Event-Handler implementiert werden. Wenn Sie beispielsweise ein Element abrufen und an ein anderes übergeordnetes Element anhängen, wird es verschoben, aber das Kopieren des Knotens führt zu einem Kopiereffekt.,
Wenn mehrere Drop-Effekte für eine einzelne Drop-Zone definiert sind, sollte die dropEffect-Eigenschaft verwendet werden, um zu bestimmen, welche Drag-Operation für dieses bestimmte Drop-Ereignis gewünscht wurde.
Das Folgende ist ein Beispiel für den Umgang mit einem Tropfen.
Manchmal haben Sie verschiedene Typen derselben Daten unterstützt, möchten aber nur den spezifischsten Typ abrufen. Der folgende Code aus MDN-Dokumenten zeigt dies.,
8) Verwenden Sie das Dragend-Ereignis, um zu überprüfen, ob Drop erfolgreich war
Am Ende einer Ziehoperation wird ein Dragend-Ereignis am Quellelement ausgelöst. Das Ereignis wird ausgelöst, ob das Ziehen erfolgreich war oder abgebrochen wurde.
Um zu überprüfen, ob die Drag-Operation erfolgreich war oder nicht, kann der Wert der dropEffect wie folgt überprüft werden:
- Wenn der Wert der dropEffect-Eigenschaft im Dragend-Ereignishandler „none“ ist, bedeutet dies, dass die Drag-Operationen abgebrochen wurden.,
- Andernfalls ist der Wert der dropEffect-Eigenschaft der Vorgang, der erfolgreich ausgeführt wurde.
Hmm, also, wie ist das nützlich?
Das Quellelement kann diese Informationen nach einem erfolgreichen Verschiebungsvorgang verwenden, um das gezogene Element vom alten Speicherort zu entfernen.
Demo auf HTML Element Drag & Drop
Hinweis: sie können auch klonen das projekt von meinem Github hier.,
1) Detect the Drag & Drop Feature Support in Your Browser
Before using the HTML drag & drop API, add feature detection code to ensure browser support.
The following code is the feature detection code for the HTML drag & drop API from Modernizr.,
2) Definieren Sie eine Drop-Zone (Drop-Position)
Standardmäßig erlaubt kein Element im HTML-Dokument ein Drop. Dies kann jedoch geändert werden, und um ein Element zu einer Drop-Zone zu machen, muss es Folgendes haben:
- Der ondragover-Ereignishandler, der ausgeführt wird, wenn die Datei(en) über den Drop-Speicherort gezogen wird.
- Der Ondrop-Ereignishandler, der ausgeführt wird, wenn die Datei(en) am Ablageort abgelegt wird.,
Wie in MDN-Dokumenten angegeben:
Dragstart-und Dragend-Ereignisse werden nicht ausgelöst, wenn eine Datei vom Betriebssystem in den Browser gezogen wird.
folgende ist ein Beispiel für die Definition eines Elements als drop-Position.
3) Handle der Datei, Drop
Wenn der Benutzer die Datei(en) in eine drop-zone, ein drop-Ereignis ausgelöst werden. Während des Drop-Ereignisses sollten die Dateien wie gewünscht verarbeitet werden.,
Um auf jede gelöschte Datei zuzugreifen, verwenden Sie die DataTransfer-Eigenschaft des Ereignisses, um auf die Eigenschaft files zuzugreifen. Verwenden Sie nach dem Zugriff auf eine gelöschte Datei die Datei-API, um sie zu verarbeiten.
Wenn der Browser die Eigenschaft DataTransferItemList unterstützt, können Sie sie mit der Methode getAsFile() verwenden, anstatt die Eigenschaft DataTransfer für den Zugriff auf die Datei zu verwenden.
Sowohl im Dragover-als auch im Drop-Ereignishandler muss preventDefault() aufgerufen werden, um ein Drop zuzulassen, da dies anzeigt, dass ein Drop an dieser Stelle zulässig ist., Außerdem wird verhindert, dass die Datei geöffnet wird, was das Standardverhalten ist, das beim Löschen einer Datei auf einer Webseite auftritt.
Wenn ein Drop nur in bestimmten Situationen zulässig ist, in denen Bedingungen verwendet werden, fügen Sie preventDefault nur hinzu, wenn die Bedingungen für das Zulassen eines Drop erfüllt sind. Dies geschieht, um zu verhindern, dass das Element eine Drop-Zone ist, wenn die Bedingungen nicht erfüllt sind, in denen drop nicht zulässig sein sollte.
Das folgende Beispiel aus MDN-Dokumenten zeigt die Verarbeitung gelöschter Dateien, bei denen ein Drag-Element, das keine Datei ist, ignoriert wird., Both possible ways are demonstrated in this
Demo on HTML Element’s Drag & Drop
Note: you can also clone the project from my Github here.