Datei-Drag-and-Drop

HTML Drag-and-Drop-Schnittstellen ermöglichen es Webanwendungen, Dateien auf eine Webseite zu ziehen und fallen zu lassen. 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 zum Ziehen und Ablegen bestehen darin, eine Ablagezone zu definieren (d.h. ein Zielelement für das Ablegen der Datei) und Ereignis-Handler für die drop- und dragover-Ereignisse zu definieren. Diese Schritte werden unten beschrieben, einschließlich Beispiel-Code-Snippets. Der vollständige Quellcode ist im MDN Drag-and-Drop-Repository verfügbar (Pull-Requests und/oder Probleme sind willkommen).

Beachten Sie, dass HTML Drag-and-Drop zwei verschiedene APIs definiert, um das Ziehen und Ablegen von Dateien zu unterstützen. Eine API ist das DataTransfer-Interface und die zweite API sind die DataTransferItem- und DataTransferItemList-Schnittstellen. Dieses Beispiel veranschaulicht die Verwendung beider APIs (und verwendet keine spezifischen Gecko-Schnittstellen).

Definieren Sie die Ablagezone

Das Zielelement des drop-Ereignisses benötigt einen ondrop-Ereignis-Handler. Das folgende Code-Snippet zeigt, wie dies mit einem <div>-Element gemacht wird:

html
<div id="drop_zone">
  <p>Drag one or more files to this <i>drop zone</i>.</p>
</div>
js
document.getElementById("drop_zone").addEventListener("drop", dropHandler);

Typischerweise wird eine Anwendung einen dragover-Ereignis-Handler auf dem Ablageziel-Element einschließen und dieser Handler wird das Standard-Zieh-Verhalten des Browsers deaktivieren. Um diesen Handler hinzuzufügen, müssen Sie einen dragover-Ereignis-Handler einschließen:

js
document
  .getElementById("drop_zone")
  .addEventListener("dragover", dragOverHandler);

Schließlich möchte eine Anwendung möglicherweise das Ablageziel-Element gestalten, um visuell anzuzeigen, dass das Element eine Ablagezone ist. In diesem Beispiel verwendet das Ablageziel-Element die folgende Formatierung:

css
#drop_zone {
  border: 5px solid blue;
  width: 200px;
  height: 100px;
}

Hinweis: Die dragstart- und dragend-Ereignisse werden nicht ausgelöst, wenn eine Datei vom Betriebssystem in den Browser gezogen wird. Um zu erkennen, wann Betriebssystemdateien 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-Image/Cursor-Overlay anzuwenden, wenn Dateien vom Betriebssystem gezogen werden — weil der Drag-Daten-Speicher nur im dragstart-Ereignis modifiziert werden kann. Dies gilt auch für setData().

Verarbeiten des Ablagevorgangs

Das drop-Ereignis wird ausgelöst, wenn der Benutzer die Datei(en) ablegt. Im folgenden Ablage-Handler, wenn der Browser die DataTransferItemList-Schnittstelle unterstützt, wird die Methode getAsFile() verwendet, um auf jede Datei zuzugreifen; andernfalls wird die files-Eigenschaft der DataTransfer-Schnittstelle 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 mit der File API verarbeiten.

Beachten Sie, dass in diesem Beispiel jedes Ziehelement, das keine Datei ist, ignoriert wird.

js
function dropHandler(ev) {
  console.log("File(s) dropped");

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // 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();
        console.log(`… file[${i}].name = ${file.name}`);
      }
    });
  } else {
    // Use DataTransfer interface to access the file(s)
    [...ev.dataTransfer.files].forEach((file, i) => {
      console.log(`… file[${i}].name = ${file.name}`);
    });
  }
}

Deaktivieren des Standard-Zieh-Verhaltens des Browsers

Der folgende dragover-Ereignis-Handler ruft preventDefault() auf, um den Standard-Zieh-und-Ablege-Handler des Browsers zu deaktivieren.

js
function dragOverHandler(ev) {
  console.log("File(s) in drop zone");

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

Siehe auch