Datei Drag-and-Drop
HTML Drag and Drop Schnittstellen ermöglichen es Webanwendungen, Dateien auf einer Webseite zu ziehen und abzulegen. Dieses Dokument beschreibt, wie eine Anwendung eine oder mehrere Dateien akzeptieren kann, die aus dem Dateimanager der zugrunde liegenden Plattform gezogen und auf einer Webseite abgelegt werden.
Die Hauptschritte für Drag-and-Drop sind das Definieren einer Ablagezone (d.h. ein Zielelement für das Ablegen der Datei) und das Definieren von Ereignis-Handlern für die drop und dragover Ereignisse. Diese Schritte werden unten beschrieben, einschließlich Codebeispielen.
Definition der Ablagezone
Das HTML definiert die Ablagezone als ein <div> und einen Ausgabebereich (<pre>), der später gefüllt wird.
<div id="drop-zone">
<p>Drag one or more files to this <i>drop zone</i>.</p>
</div>
<pre id="output"></pre>
Als Zielelement hört es auf das drop Ereignis, um die abgelegte Datei zu verarbeiten.
const dropZone = document.getElementById("drop-zone");
const output = document.getElementById("output");
dropZone.addEventListener("drop", dropHandler);
Damit das drop Ereignis ausgelöst wird, muss das Element auch das dragover Ereignis abbrechen. Hier brechen wir das Ereignis auf window ab (was auch das Ereignis betrifft, das auf dropZone gefeuert wird, da es nach oben blubbert), weil wir auch das drop Ereignis auf window hören möchten, um die Standardaktion des Browsers zu verhindern, die Datei zu öffnen, wenn sie nicht in der Ablagezone abgelegt wurde.
window.addEventListener("dragover", (e) => {
e.preventDefault();
});
window.addEventListener("drop", (e) => {
e.preventDefault();
});
Schließlich möchte eine Anwendung möglicherweise das Ziel-Ablageelement stylen, um visuell anzuzeigen, dass das Element eine Ablagezone ist. In diesem Beispiel verwendet das Ziel-Ablageelement folgendes Styling:
#drop-zone {
border: 5px solid blue;
width: 200px;
height: 100px;
}
Hinweis:
dragstart und dragend Ereignisse werden nicht ausgelöst, wenn eine Datei vom Betriebssystem in den Browser gezogen wird. Um zu erkennen, wann OS-Dateien in den Browser gezogen werden, verwenden Sie dragenter und dragleave.
Dies bedeutet, dass es nicht möglich ist, setDragImage() zu verwenden, um ein benutzerdefiniertes Drag-Bild/Cursor-Overlay anzuwenden, wenn Dateien vom Betriebssystem gezogen werden — da der Drag-Daten-Store nur im dragstart Ereignis modifiziert werden kann. Dies gilt auch für setData().
Verarbeitung des Ablagevorgangs
Das drop Ereignis wird ausgelöst, wenn der Benutzer die Datei(en) ablegt. Im folgenden Handler für das Ablegen wird die Methode getAsFile() verwendet, um auf jede Datei zuzugreifen. Dieses Beispiel zeigt, wie der Name jeder gezogenen Datei in die Konsole geschrieben wird. In einer echten Anwendung möchte eine Anwendung möglicherweise eine Datei mithilfe der File API verarbeiten.
Beachten Sie, dass in diesem Beispiel alle Ziehelemente, die keine Dateien sind, ignoriert werden.
function dropHandler(ev) {
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
let result = "";
// Use DataTransferItemList interface to access the file(s)
[...ev.dataTransfer.items].forEach((item, i) => {
// If dropped items aren't files, reject them
if (item.kind === "file") {
const file = item.getAsFile();
result += `• file[${i}].name = ${file.name}\n`;
}
});
output.textContent = result;
}