Datei ziehen und ablegen

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 des zugrunde liegenden Systems gezogen und auf eine Webseite abgelegt werden.

Die Hauptschritte zum Ziehen und Ablegen bestehen darin, eine Ablagezone (d.h. ein Ziel-Element für das Ablegen der Datei) zu definieren und Ereignishandler für die drop und dragover Ereignisse zu definieren. Diese Schritte werden unten beschrieben, einschließlich Beispiel-Codeausschnitten. Der vollständige Quellcode ist im MDN's Drag-and-Drop Repository verfügbar (Pull-Anfragen und/oder Probleme sind willkommen).

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

Definition der Ablagezone

Das Ziel-Element des drop Ereignisses benötigt einen ondrop-Ereignishandler. Der folgende Codeausschnitt zeigt, wie dies mit einem <div> Element erfolgt:

html
<div id="drop_zone" ondrop="dropHandler(event);">
  <p>Drag one or more files to this <i>drop zone</i>.</p>
</div>

Typischerweise wird eine Anwendung einen dragover Ereignishandler auf das Ablagezonen-Element einfügen, und dieser Handler wird das Standard-Ziehverhalten des Browsers deaktivieren. Um diesen Handler hinzuzufügen, müssen Sie einen ondragover Ereignishandler einfügen:

html
<div
  id="drop_zone"
  ondrop="dropHandler(event);"
  ondragover="dragOverHandler(event);">
  <p>Drag one or more files to this <i>drop zone</i>.</p>
</div>

Schließlich möchte eine Anwendung möglicherweise das Ablagezonen-Element so stylen, dass es visuell als Ablagezone erkennbar ist. In diesem Beispiel verwendet das Ablagezonen-Element folgendes Styling:

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

Hinweis: dragstart und dragend Ereignisse werden nicht ausgelöst, wenn eine Datei aus dem Betriebssystem in den Browser gezogen wird. Um zu erkennen, wann Dateien vom Betriebssystem in den Browser gezogen werden, verwenden Sie dragenter und dragleave. Das bedeutet, dass es nicht möglich ist, setDragImage() zu verwenden, um ein benutzerdefiniertes Drag-Bild/Cursor-Overlay anzuwenden, wenn Dateien aus dem Betriebssystem gezogen werden — weil der Drag-Daten-Speicher nur im dragstart Ereignis modifiziert werden kann. Dies gilt auch für setData().

Verarbeitung des Drops

Das drop Ereignis wird ausgelöst, wenn der Benutzer die Datei(en) ablegt. Im folgenden Drop-Handler wird, wenn der Browser die DataTransferItemList Schnittstelle unterstützt, die getAsFile() Methode 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 auf 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 Ereignishandler ruft preventDefault() auf, um den Standard-Zieh-und Ablegen-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