JavaScript Academy · Lektion

Visuelles Feedback beim Ziehen

Formatieren Sie Elemente während Ziehvorgängen.

Visuelles Feedback beim Ziehen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Warum visuelles Feedback wichtig ist

Gutes Drag-and-Drop zeigt dem Benutzer, was gerade passiert: welches Element verschoben wird, wo es abgelegt werden kann und ob das Ablegen gültig ist. Ohne Feedback wirkt die Interaktion fehlerhaft.

Das gezogene Element formatieren

Blenden Sie die Quelle bei dragstart ab oder skalieren Sie sie, damit der Benutzer sieht, was er aufgenommen hat.

item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));

Das dragenter-Ereignis

dragenter wird ausgelöst, wenn das gezogene Element in ein mögliches Ziel gelangt. Verwenden Sie es, um die Zone hervorzuheben.

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
  zone.classList.add("drag-over");
});

Das dragleave-Ereignis

dragleave wird ausgelöst, wenn das Element das Ziel verlässt. Entfernen Sie die Hervorhebung an dieser Stelle.

zone.addEventListener("dragleave", () => {
  zone.classList.remove("drag-over");
});

Das Flackerproblem

dragenter/dragleave werden auch für untergeordnete Elemente ausgelöst und verursachen dadurch Flackern. Ein Zähler oder eine Prüfung von relatedTarget hält die Hervorhebung stabil.

let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });

Beim Ablegen zurücksetzen

Löschen Sie den Zustand der Hervorhebung immer im drop-Handler, da dragleave bei einem erfolgreichen Ablegen möglicherweise nicht ausgelöst wird.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  depth = 0;
  zone.classList.remove("drag-over");
});

Das Drag-Bild anpassen

setDragImage(element, offsetX, offsetY) in dragstart ersetzt das standardmäßige Geisterbild durch ein beliebiges Element.

item.addEventListener("dragstart", (e) => {
  const ghost = document.getElementById("custom-ghost");
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

Cursor über dropEffect steuern

Der Cursor (Pluszeichen beim Kopieren, Pfeil beim Verschieben, Symbol für nicht zulässiges Ablegen) wird durch dropEffect gesteuert, das bei dragover gesetzt wird. Lehnen Sie ungültige Drops mit "none" ab.

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

Einen Drop-Platzhalter anzeigen

Fügen Sie in sortierbaren Listen ein Platzhalterelement an der voraussichtlichen Drop-Position ein, damit Benutzer genau sehen, wo das Element abgelegt wird.

function showPlaceholder(beforeEl) {
  list.insertBefore(placeholder, beforeEl);
}

Die Einfügeposition berechnen

Vergleichen Sie die Y-Position des Zeigers mit dem vertikalen Mittelpunkt jedes Elements, um zu entscheiden, ob es davor oder danach abgelegt werden soll.

function getAfterElement(container, y) {
  const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
  return items.find((el) => {
    const box = el.getBoundingClientRect();
    return y < box.top + box.height / 2;
  });
}

Barrierefreies Feedback

Rein visuelle Hinweise schließen Benutzer von Tastatur und Screenreader aus. Ergänzen Sie Drag-and-Drop für die Barrierefreiheit durch ARIA-Live-Ansagen und eine Tastaturalternative.

Kurztest

Testen Sie das visuelle Feedback.

Zusammenfassung: Visuelles Feedback

Sie haben das gezogene Element formatiert, Zonen mit dragenter/dragleave hervorgehoben, das Flackern mit einem Tiefenzähler behoben, das Drag-Bild angepasst, den Cursor über dropEffect gesteuert und Drop-Platzhalter angezeigt. Als Nächstes: Dateien hineinziehen.

Häufig gestellte Fragen

Ist die Lektion „Visuelles Feedback beim Ziehen“ kostenlos?

Ja — der vollständige Text von „Visuelles Feedback beim Ziehen“ 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 „Visuelles Feedback beim Ziehen“?

Formatieren Sie Elemente während Ziehvorgängen. 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 3 von 4.

Wie lange dauert die Lektion „Visuelles Feedback beim Ziehen“?

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