HTML - Drag & Drop API

Dropzonen definieren

Um ein Element als Dropzone zu definieren, müssen Sie keine speziellen Attribute setzen. Stattdessen behandeln Sie die dragover- und drop-Events auf dem Element. Das dragover-Event wird kontinuierlich ausgelöst, während ein ziehbares Element über eine Dropzone gezogen wird, und das drop-Event wird ausgelöst, wenn das ziehbare Element über der Dropzone losgelassen wird.

Damit ein Element Drops akzeptiert, müssen Sie das Standardverhalten des dragover-Events durch Aufruf von event.preventDefault() aufheben. Dies ist notwendig, da Elemente standardmäßig keine Drops erlauben.

<div id="drop-zone">
  Elemente hier ablegen
</div>

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});

Das dragover-Event behandeln

Das dragover-Event wird kontinuierlich ausgelöst, während ein ziehbares Element über eine Dropzone gezogen wird. Sie können dieses Event nutzen, um dem Benutzer visuelles Feedback zu geben und anzuzeigen, dass die Dropzone bereit ist, das ziehbare Element zu akzeptieren.

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
  event.target.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', function(event) {
  event.target.classList.remove('drag-over');
});

In diesem Beispiel fügen wir dem Dropzone-Element eine CSS-Klasse drag-over hinzu, wenn das dragover-Event ausgelöst wird. Diese Klasse kann verwendet werden, um die Dropzone visuell hervorzuheben. Wir behandeln auch das dragleave-Event, um die Klasse zu entfernen, wenn das ziehbare Element die Dropzone verlässt.

Das drop-Event behandeln

Das drop-Event wird ausgelöst, wenn ein ziehbares Element über einer Dropzone losgelassen wird. Hier rufen Sie die gezogenen Daten ab und führen alle notwendigen Aktionen aus.

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedData = event.dataTransfer.getData('text/plain');
  event.target.appendChild(document.getElementById(draggedData));
  event.target.classList.remove('drag-over');
});

Im drop-Event-Listener heben wir zuerst das Standardverhalten mit event.preventDefault() auf. Dann rufen wir die Daten ab, die während des dragstart-Events gesetzt wurden, mit event.dataTransfer.getData(). In diesem Beispiel erwarten wir, dass die Daten die ID des ziehbaren Elements sind.

Schließlich fügen wir das ziehbare Element mit event.target.appendChild() der Dropzone hinzu und entfernen die drag-over-Klasse von der Dropzone.

Zieh-Daten abrufen

Um die gezogenen Daten abzurufen, verwenden Sie die Methode dataTransfer.getData() innerhalb des drop-Event-Listeners. Diese Methode nimmt den Datentyp als Argument und gibt die entsprechenden Daten zurück, die während des dragstart-Events gesetzt wurden.

const draggedData = event.dataTransfer.getData('text/plain');

In diesem Beispiel rufen wir die Daten vom Typ 'text/plain' ab, die im dragstart-Event mit event.dataTransfer.setData('text/plain', event.target.id) gesetzt wurden.

Durch das Definieren von Dropzonen, die Behandlung der dragover- und drop-Events und das Abrufen der Zieh-Daten können Sie interaktive Erfahrungen schaffen, bei denen Benutzer ziehbare Elemente auf bestimmte Bereiche Ihrer Webseite ablegen können.

Gestaltung ziehbarer Elemente

Um ziehbare Elemente hervorzuheben und deutlich zu zeigen, dass sie interaktiv sind, können Sie CSS-Stile auf sie anwenden. Hier sind einige gängige Gestaltungstechniken:

.draggable {
  cursor: move;
  background-color: #f0f0f0;
  border: 2px solid #999;
  padding: 10px;
  margin-bottom: 10px;
}

.draggable:hover {
  background-color: #e0e0e0;
  border-color: #666;
}

Die Klasse .draggable wird auf ziehbare Elemente angewendet. Die cursor-Eigenschaft ist auf move gesetzt, um einen Bewegungscursor anzuzeigen, wenn Sie über das Element fahren. Die Eigenschaften background-color, border, padding und margin-bottom werden verwendet, um die ziehbaren Elemente visuell von anderen Inhalten zu trennen.

Die Pseudo-Klasse :hover wird verwendet, um die Hintergrundfarbe und Rahmenfarbe zu ändern, wenn Sie mit der Maus über das ziehbare Element fahren. Dies bietet visuelle Rückmeldung, dass das Element interaktiv ist.

Anzeigen gültiger Ablagezonen

Wenn ein ziehbares Element gezogen wird, ist es hilfreich, anzuzeigen, welche Ablagezonen gültige Ziele zum Ablegen des Elements sind. Sie können dies tun, indem Sie Stile auf die Ablagezonen basierend auf dem Ziehzustand anwenden.

.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  color: #999;
}

.drop-zone.drag-over {
  border-color: #666;
  background-color: #f0f0f0;
  color: #333;
}

Die Klasse .drop-zone definiert die grundlegenden Stile für Ablagezonen. Die border-Eigenschaft ist auf eine gestrichelte Linie gesetzt, um die Ablagezone visuell abzugrenzen. Die Eigenschaften padding, text-align und color werden verwendet, um das Aussehen der Ablagezone zu gestalten.

Die Klasse .drag-over wird der Ablagezone hinzugefügt, wenn ein ziehbares Element darüber gezogen wird. Diese Klasse ändert die Rahmenfarbe, Hintergrundfarbe und Textfarbe, um zu zeigen, dass die Ablagezone ein gültiges Ziel zum Ablegen des Elements ist.

Visuelle Hinweise während Ziehvorgängen geben

Während des Ziehvorgangs können Sie zusätzliche visuelle Hinweise geben, um Sie zu führen und Rückmeldung zum aktuellen Zustand des Ziehens zu geben. Hier einige Beispiele:

Sie können diese visuellen Hinweise umsetzen, indem Sie die Stile des ziehbaren Elements und der Ablagezonen während der Zieh-Events dynamisch mit JavaScript ändern.

draggableItem.addEventListener('dragstart', function(event) {
  event.target.style.opacity = '0.5';
});

draggableItem.addEventListener('dragend', function(event) {
  event.target.style.opacity = '1';
});

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
  event.target.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', function(event) {
  event.target.classList.remove('drag-over');
});

Die Deckkraft des ziehbaren Elements wird auf 0.5 reduziert, wenn das dragstart-Event ausgelöst wird, um zu zeigen, dass es gezogen wird. Wenn das dragend-Event ausgelöst wird, wird die Deckkraft auf 1 zurückgesetzt.

Der dragover-Event-Listener fügt der Ablagezone die Klasse drag-over hinzu, wenn das ziehbare Element darüber gezogen wird. Dies gibt visuelle Rückmeldung, dass es ein gültiges Ablageziel ist. Der dragleave-Event-Listener entfernt die Klasse, wenn das ziehbare Element die Ablagezone verlässt.

Durch die Anwendung von Stilen auf ziehbare Elemente, die Anzeige gültiger Ablagezonen und das Geben visueller Hinweise während des Ziehvorgangs können Sie eine intuitivere und ansprechendere Drag-and-Drop-Erfahrung für Ihre Benutzer schaffen.

Drag and Drop mit Bildern

Sie können Bilder innerhalb einer Webseite oder zwischen verschiedenen Anwendungen per Drag and Drop bewegen. Um Drag and Drop für Bilder zu aktivieren, müssen Sie das draggable-Attribut für das <img>-Element setzen:

<img src="pfad/zum/bild.jpg" alt="Ziehbares Bild" draggable="true">

Wenn Sie beginnen, ein Bild zu ziehen, können Sie im dragstart-Event auf die Bilddaten zugreifen, indem Sie die dataTransfer.setData()-Methode verwenden:

const ziehbaresBild = document.querySelector('img');

ziehbaresBild.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.src);
  event.dataTransfer.effectAllowed = 'copy';
});

Im obigen Beispiel setzen wir die Bild-Quell-URL als Drag-Daten und geben die effectAllowed-Eigenschaft an, um anzuzeigen, dass das Bild kopiert werden kann.

Um das Ablegen eines Bildes in einer Ablagezone zu behandeln, können Sie die Bild-URL aus dem drop-Event abrufen und ein neues <img>-Element erstellen:

ablagezone.addEventListener('drop', function(event) {
  event.preventDefault();
  const bildUrl = event.dataTransfer.getData('text/plain');
  const neuesBild = document.createElement('img');
  neuesBild.src = bildUrl;
  event.target.appendChild(neuesBild);
});

Drag and Drop mit Dateien

Die Drag & Drop API unterstützt auch das Ziehen und Ablegen von Dateien vom Computer des Benutzers auf eine Webseite. Um Datei-Drag-and-Drop zu aktivieren, müssen Sie das drop-Event behandeln und auf die abgelegten Dateien über die event.dataTransfer.files-Eigenschaft zugreifen.

ablagezone.addEventListener('drop', function(event) {
  event.preventDefault();
  const dateien = event.dataTransfer.files;
  for (let i = 0; i < dateien.length; i++) {
    const datei = dateien[i];
    // Verarbeite die abgelegte Datei
  }
});

Im obigen Beispiel erhalten wir die abgelegten Dateien aus der event.dataTransfer.files-Eigenschaft, die ein FileList-Objekt ist. Sie können dann über die Dateien iterieren und sie nach Bedarf verarbeiten, z.B. sie auf einen Server hochladen oder ihren Inhalt lesen.

Drag and Drop zwischen Fenstern

Die Drag & Drop API ermöglicht Drag-and-Drop-Operationen zwischen verschiedenen Browserfenstern oder Tabs. Um fensterübergreifendes Drag and Drop zu aktivieren, müssen Sie die effectAllowed-Eigenschaft im dragstart-Event auf 'copy' setzen und das drop-Event im Zielfenster behandeln.

// Quellfenster
ziehbaresElement.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', 'Hallo aus einem anderen Fenster!');
  event.dataTransfer.effectAllowed = 'copy';
});

// Zielfenster
ablagezone.addEventListener('drop', function(event) {
  event.preventDefault();
  const daten = event.dataTransfer.getData('text/plain');
  console.log('Empfangene Daten:', daten);
});

Im Quellfenster setzen wir die zu ziehenden Daten und geben effectAllowed als 'copy' an. Im Zielfenster behandeln wir das drop-Event und erhalten die gezogenen Daten mit event.dataTransfer.getData().

Drag and Drop mit benutzerdefinierten Elementen

Sie können Ihre eigenen benutzerdefinierten Elemente erstellen, die Drag-and-Drop-Funktionalität unterstützen. Dazu definieren Sie ein benutzerdefiniertes Element und fügen Event-Listener für die Drag-and-Drop-Events hinzu.

class ZiehbaresElement extends HTMLElement {
  constructor() {
    super();
    this.draggable = true;
    this.addEventListener('dragstart', this.handleDragStart);
  }

  handleDragStart(event) {
    event.dataTransfer.setData('text/plain', this.innerHTML);
    event.dataTransfer.effectAllowed = 'move';
  }
}

customElements.define('ziehbares-element', ZiehbaresElement);

Im obigen Beispiel definieren wir ein benutzerdefiniertes Element namens <ziehbares-element>, das die HTMLElement-Klasse erweitert. Wir setzen die draggable-Eigenschaft auf true und fügen einen dragstart-Event-Listener hinzu. Die handleDragStart-Methode setzt die zu ziehenden Daten und gibt effectAllowed als 'move' an.

Sie können dann das benutzerdefinierte Element in Ihrem HTML verwenden:

<ziehbares-element>Zieh mich!</ziehbares-element>

Durch die Erstellung benutzerdefinierter Elemente mit Drag-and-Drop-Unterstützung können Sie wiederverwendbare Komponenten erstellen, die sich leicht in Ihre Webanwendungen integrieren lassen.

Diese fortgeschrittenen Techniken zeigen die Flexibilität und Leistungsfähigkeit der Drag & Drop API. Ob Sie mit Bildern, Dateien, fensterübergreifendem Drag and Drop oder benutzerdefinierten Elementen arbeiten, Sie können interaktive und ansprechende Erfahrungen für Ihre Benutzer schaffen.

Neuanordnung von Listenelementen

Ein häufiger Anwendungsfall für die Drag & Drop API ist die Neuanordnung von Listenelementen. Sie können Benutzern erlauben, Listenelemente per Drag and Drop zu verschieben, um deren Reihenfolge zu ändern.

<ul id="item-list">
  <li draggable="true">Eintrag 1</li>
  <li draggable="true">Eintrag 2</li>
  <li draggable="true">Eintrag 3</li>
  <li draggable="true">Eintrag 4</li>
</ul>

const list = document.getElementById('item-list');

list.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.innerHTML);
});

list.addEventListener('dragover', function(event) {
  event.preventDefault();
});

list.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedItem = event.dataTransfer.getData('text/plain');
  const dropTarget = event.target;
  if (dropTarget.tagName === 'LI') {
    dropTarget.insertAdjacentHTML('beforebegin', `<li draggable="true">${draggedItem}</li>`);
    event.dataTransfer.clearData();
  }
});

Wir haben ein <ul>-Element mit <li>-Elementen, die das Attribut draggable auf true gesetzt haben. Wir fügen einen dragstart-Event-Listener zur Liste hinzu, um die zu ziehenden Daten festzulegen. Beim dragover-Event rufen wir event.preventDefault() auf, um das Ablegen zu ermöglichen. Im drop-Event-Listener holen wir die gezogenen Daten, erstellen ein neues <li>-Element mit dem gezogenen Inhalt und fügen es vor dem Ablageziel ein.

Verschieben von Elementen zwischen Containern

Ein weiterer Anwendungsfall ist das Verschieben von Elementen zwischen verschiedenen Containern. Sie könnten zwei Listen haben und Benutzern erlauben, Elemente von einer Liste in die andere zu verschieben.

<div id="container1">
  <p draggable="true">Eintrag 1</p>
  <p draggable="true">Eintrag 2</p>
</div>
<div id="container2"></div>

const container1 = document.getElementById('container1');
const container2 = document.getElementById('container2');

container1.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.innerHTML);
});

container2.addEventListener('dragover', function(event) {
  event.preventDefault();
});

container2.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedItem = event.dataTransfer.getData('text/plain');
  event.target.innerHTML += `<p draggable="true">${draggedItem}</p>`;
  event.dataTransfer.clearData();
});

Wir haben zwei <div>-Elemente, die die Container darstellen. Der erste Container enthält <p>-Elemente mit dem Attribut draggable auf true gesetzt. Wir fügen einen dragstart-Event-Listener zum ersten Container hinzu, um die zu ziehenden Daten festzulegen. Der zweite Container hat dragover- und drop-Event-Listener. Beim drop-Event holen wir die gezogenen Daten, erstellen ein neues <p>-Element und fügen es dem zweiten Container hinzu.

Hochladen von Dateien per Drag and Drop

Sie können die Drag & Drop API verwenden, um Benutzern das Hochladen von Dateien zu ermöglichen, indem sie diese in einen festgelegten Bereich ziehen und ablegen.

<div id="drop-zone">
  Dateien hier zum Hochladen ablegen
</div>

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  const files = event.dataTransfer.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const formData = new FormData();
    formData.append('file', file);
    fetch('/upload', {
      method: 'POST',
      body: formData
    });
  }
});

Wir haben ein <div>-Element, das die Ablagezone darstellt. Wir fügen dragover- und drop-Event-Listener zur Ablagezone hinzu. Beim drop-Event holen wir die abgelegten Dateien aus event.dataTransfer.files, erstellen für jede Datei ein FormData-Objekt und senden eine POST-Anfrage an den Server, um die Datei hochzuladen.

Erstellen interaktiver Puzzle-Spiele

Die Drag & Drop API kann verwendet werden, um interaktive Puzzle-Spiele zu erstellen, bei denen Benutzer Puzzleteile ziehen und ablegen, um das Puzzle zu lösen.

<div id="puzzle-container">
  <div class="puzzle-piece" draggable="true"></div>
  <div class="puzzle-piece" draggable="true"></div>
  <div class="puzzle-piece" draggable="true"></div>
  <div class="puzzle-piece" draggable="true"></div>
</div>

const puzzleContainer = document.getElementById('puzzle-container');
const puzzlePieces = document.querySelectorAll('.puzzle-piece');

puzzlePieces.forEach(piece => {
  piece.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', event.target.innerHTML);
  });
});

puzzleContainer.addEventListener('dragover', function(event) {
  event.preventDefault();
});

puzzleContainer.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedPiece = event.dataTransfer.getData('text/plain');
  const dropTarget = event.target;
  if (dropTarget.classList.contains('puzzle-piece')) {
    const temp = dropTarget.innerHTML;
    dropTarget.innerHTML = draggedPiece;
    event.dataTransfer.setData('text/plain', temp);
  }
});

Wir haben ein <div>-Element, das den Puzzle-Container darstellt, und <div>-Elemente, die die Puzzleteile darstellen. Jedes Puzzleteil hat das Attribut draggable auf true gesetzt. Wir fügen jedem Puzzleteil einen dragstart-Event-Listener hinzu, um die zu ziehenden Daten festzulegen. Der Puzzle-Container hat dragover- und drop-Event-Listener. Beim drop-Event holen wir das gezogene Teil und das Ablageziel und tauschen deren Inhalte aus.

Diese Beispiele zeigen einige der Möglichkeiten der Drag & Drop API. Sie können sie verwenden, um interaktive Erlebnisse zu schaffen, Datei-Uploads zu handhaben, Spiele zu entwickeln und vieles mehr. Die API bietet eine flexible und intuitive Möglichkeit, Drag-and-Drop-Funktionen in Webanwendungen zu implementieren.