JavaScript Academy · Lektion

Ablageziele und dataTransfer

Akzeptieren Sie abgelegte Daten und übertragen Sie sie.

Ablageziele und dataTransfer ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was macht ein Drop-Ziel aus?

Standardmäßig lehnen Elemente Drop-Vorgänge ab. Um einen Drop zu akzeptieren, müssen Sie das Standardverhalten sowohl bei dragover als auch bei drop verhindern. Das ist die häufigste Stolperfalle.

Drop mit dragover zulassen

Der Browser verhindert das Ablegen, sofern Sie im dragover-Handler nicht preventDefault() aufrufen. Ohne diesen Aufruf wird das drop-Ereignis nie ausgelöst.

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
  e.preventDefault(); // REQUIRED to allow drop
});

Das drop-Ereignis

Wenn der Benutzer das Element über einem gültigen Ziel loslässt, wird drop ausgelöst. Verhindern Sie auch hier die Standardaktion (dadurch verhindert der Browser, dass abgelegte Dateien oder URLs geöffnet werden), und lesen Sie die Daten aus.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  console.log("Dropped", id);
});

dataTransfer auslesen

getData(format) ruft ab, was in dragstart gespeichert wurde. Die Formatzeichenfolge muss mit der gesetzten Zeichenfolge übereinstimmen.

const payload = e.dataTransfer.getData("text/plain");

Ein Element verschieben

Ein klassischer Anwendungsfall: Hängen Sie den gezogenen Knoten anhand der übertragenen ID in die Drop-Zone ein.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);
});

Mehrere Datenformate

dataTransfer kann mehrere Formate gleichzeitig enthalten – zum Beispiel text/plain und application/json –, und das Ziel liest das Format aus, das es versteht.

e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));

dropEffect festlegen

Setzen Sie in dragover dropEffect auf "copy", "move" oder "link", um den Cursor und die Semantik der Operation zu steuern.

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
});

effectAllowed vs dropEffect

effectAllowed (von der Quelle gesetzt) gibt an, was zulässig ist; dropEffect (vom Ziel gesetzt) wählt eine dieser Möglichkeiten aus. Zusammen sorgen sie für die passende Cursoranzeige.

Eine Liste neu ordnen

Kombinieren Sie die Drop-Position mit dem Einfügen, um Elemente neu zu ordnen. Bestimmen Sie, ob das Element vor oder nach dem Element unter dem Cursor eingefügt werden soll.

list.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  list.insertBefore(dragged, e.target);
});

Das Drop-Ziel identifizieren

Verwenden Sie e.target (das Element unter dem Zeiger) und closest(), um bei verschachtelten Zielen den relevanten Container zu finden.

zone.addEventListener("drop", (e) => {
  const slot = e.target.closest(".slot");
  if (slot) slot.appendChild(getDragged(e));
});

Daten löschen

dataTransfer.clearData() leert die gespeicherten Daten. Wenn Sie ein Format übergeben, wird nur dieses gelöscht. Der Datenspeicher wird nach dem Ziehen ohnehin automatisch zurückgesetzt.

e.dataTransfer.clearData("text/plain");

Kurztest

Testen Sie Drop-Ziele.

Zusammenfassung: Drop-Ziele und dataTransfer

Sie haben Drop-Zonen erstellt, indem Sie bei dragover und drop preventDefault() aufgerufen haben, die Nutzlast mit getData ausgelesen, Elemente verschoben und neu geordnet, dropEffect gesetzt und verschachtelte Ziele verarbeitet. Als Nächstes: visuelles Feedback.

Häufig gestellte Fragen

Ist die Lektion „Ablageziele und dataTransfer“ kostenlos?

Ja — der vollständige Text von „Ablageziele und dataTransfer“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Ablageziele und dataTransfer“?

Akzeptieren Sie abgelegte Daten und übertragen Sie sie. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Ablageziele und dataTransfer“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy