dragover- und drop-Ereignisse
Definieren Sie gültige Ablageziele und behandeln Sie das drop-Ereignis
dragover- und drop-Ereignisse ist eine kostenlose HTML 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Drop-Ziele benötigen zwei Handler
Ein Drop-Ziel muss sowohl dragover (um den Drop zu erlauben) als auch drop (um ihn zu empfangen) behandeln. Ohne dragover verweigert der Browser das Auslösen von drop, da das Standardverhalten lautet: „Kein Element ist ein Drop-Ziel.“
preventDefault ist obligatorisch
Im dragover-Handler müssen Sie e.preventDefault() aufrufen. Dadurch wird das Standardverhalten des Browsers abgebrochen, das den Drop ablehnt. Ohne diesen Aufruf bleibt der Cursor auf „nicht erlaubt“ und das Drop-Ereignis wird unabhängig von der Benutzeraktion nie ausgelöst.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});dragenter und dragleave
dragenter wird einmal ausgelöst, wenn der Cursor in das Ziel eintritt; dragleave wird einmal ausgelöst, wenn er es verlässt. Verwenden Sie diese Ereignisse, um eine visuelle Hervorhebung für „Drag-over“ umzuschalten: Fügen Sie beim Eintreten eine Klasse hinzu und entfernen Sie sie beim Verlassen, damit der Benutzer sieht, welcher Bereich den Drop empfängt.
dragleave wird für untergeordnete Elemente ausgelöst
Eine subtile Besonderheit: Wenn der Cursor über ein untergeordnetes Element bewegt wird, wird am übergeordneten Element dragleave ausgelöst, gefolgt von dragenter am untergeordneten Element. Verwenden Sie einen Zähler, der in dragenter erhöht und in dragleave verringert wird. Entfernen Sie die Hervorhebung erst, wenn der Zähler wieder null erreicht.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});dropEffect setzen
Setzen Sie innerhalb von dragover e.dataTransfer.dropEffect = "move" (oder "copy", "link", "none"), um den Cursor zu steuern und der Quelle mitzuteilen, was geschehen wird. Der Effekt muss mit effectAllowed der Quelle kompatibel sein, andernfalls wird der Drop abgelehnt.
Daten bei drop lesen
Rufen Sie im Drop-Handler e.dataTransfer.getData(format) mit demselben MIME-Typ auf, der bei setData verwendet wurde (üblicherweise "text/plain"). Suchen Sie anschließend das Element anhand seiner ID, hängen Sie es an das Ziel an, aktualisieren Sie ein Datenmodell oder führen Sie aus, was die Anwendung benötigt.
Standardverhalten bei drop verhindern
Auch im Drop-Handler benötigen Sie e.preventDefault(). Ohne diesen Aufruf fällt der Browser auf sein natives Verhalten zurück – bei einer abgelegten URL bedeutet das, dass er zum Link navigiert und dadurch sofort den Zustand Ihrer Seite verwirft.
Vom Desktop ablegen
Der Browser wandelt Dateien, die aus dem Betriebssystem gezogen werden, in ein Drop-Ereignis um, bei dem e.dataTransfer.files befüllt ist. Durchlaufen Sie die FileList und lesen Sie jede Datei mit der File API, um Bilduploads, Protokolldatei-Viewer oder Dokumentimporte zu unterstützen.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Mehrere Typen in dataTransfer
setData kann dieselbe Nutzlast unter mehreren MIME-Typen speichern: "text/plain" als Fallback, "text/uri-list" für URLs und "application/json" für strukturierte Nutzdaten. Das Drop-Ziel wählt über getData den umfangreichsten Typ, den es versteht.
Mit Touch-Ereignissen koordinieren
Mobile Browser erzeugen aus Touch-Ereignissen keine künstlichen dragover- oder drop-Ereignisse. Für ein einheitliches Verhalten verwenden Sie Pointer Events mit einer manuellen Trefferprüfung oder eine Bibliothek, die die Unterschiede abstrahiert. Native HTML5-DnD sollte am besten als Desktop-Funktion betrachtet werden.
Tipp zur Leistung
dragover wird kontinuierlich ausgelöst, während sich der Cursor bewegt – oft dutzende Male pro Sekunde. Halten Sie den Handler schlank: Vermeiden Sie darin teure DOM-Abfragen oder Layout-Lesezugriffe. Cachen Sie die Rechtecke in dragenter und verwenden Sie sie wieder, solange der Cursor über dem Ziel bleibt.
Wissensüberprüfung
Warum wird das Drop-Ereignis bei einem Ziel erst ausgelöst, wenn Sie im dragover-Handler e.preventDefault() aufrufen?
Zusammenfassung
Ein funktionierendes Drop-Ziel wartet auf dragover (immer preventDefault aufrufen, optional dropEffect setzen) und drop (erneut preventDefault aufrufen, dann dataTransfer.getData oder dataTransfer.files lesen). Verwenden Sie dragenter und dragleave mit einem Zähler für die Hervorhebung und halten Sie die Handler schlank, da dragover sehr häufig ausgelöst wird.
Häufig gestellte Fragen
Ist die Lektion „dragover- und drop-Ereignisse“ kostenlos?
Ja — der vollständige Text von „dragover- und drop-Ereignisse“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „dragover- und drop-Ereignisse“?
Definieren Sie gültige Ablageziele und behandeln Sie das drop-Ereignis Du übst HTML 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 HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML 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 „dragover- und drop-Ereignisse“?
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 HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML 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
- draggable-Attribut und dragstart-Ereignis
- dragover- und drop-Ereignisse
- dataTransfer-Objekt
- Praxisprojekt: Liste per Drag-and-drop neu ordnen