JavaScript Academy · Lektion

Elemente ziehbar machen

Aktivieren Sie das Ziehen und behandeln Sie Drag-Ereignisse.

Elemente ziehbar machen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Die HTML Drag and Drop API

Mit der nativen Drag and Drop API können Benutzer Elemente aufnehmen und an anderer Stelle ablegen. Sie ist ereignisgesteuert: Quellelemente lösen Drag-Ereignisse aus, und Drop-Ziele lösen ihre eigenen Ereignisse aus. Es ist keine Bibliothek erforderlich.

Das draggable-Attribut

Standardmäßig sind nur Verknüpfungen und Bilder ziehbar. Fügen Sie draggable="true" hinzu, um jedes Element ziehbar zu machen.

<div draggable="true" id="card">Drag me</div>

draggable in JS setzen

Sie können dieses Verhalten über die Eigenschaft draggable auch aus einem Script heraus umschalten.

const card = document.getElementById("card");
card.draggable = true;

Das dragstart-Ereignis

dragstart wird in dem Moment ausgelöst, in dem ein Ziehvorgang beginnt. Hier halten Sie fest, welches Element gezogen wird.

card.addEventListener("dragstart", (e) => {
  console.log("Started dragging", card.id);
});

Daten mit dataTransfer übertragen

Das Ereignis stellt dataTransfer bereit. Verwenden Sie in dragstart setData(format, value), um Nutzdaten anzuhängen, die zusammen mit dem Ziehvorgang übertragen werden.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

Das drag-Ereignis

drag wird kontinuierlich ausgelöst, während sich das Element bewegt. Verwenden Sie es sparsam, da es viele Male pro Sekunde ausgelöst werden kann.

card.addEventListener("drag", (e) => {
  // fires repeatedly during the drag
});

Das dragend-Ereignis

dragend wird ausgelöst, wenn der Benutzer das Element loslässt, unabhängig davon, ob das Ablegen erfolgreich war. Verwenden Sie es, um die Darstellung des Quellelements zurückzusetzen.

card.addEventListener("dragend", (e) => {
  card.classList.remove("dragging");
});

Das Quellelement markieren

Ein häufig verwendetes Muster: Fügen Sie bei dragstart eine Klasse hinzu und entfernen Sie sie bei dragend, um das gezogene Element abzudunkeln oder hervorzuheben.

card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));

Zulässige Effekte

Setzen Sie effectAllowed in dragstart, um anzugeben, welche Vorgänge zulässig sind: "copy", "move", "link" oder Kombinationen daraus.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.effectAllowed = "move";
});

Hinweis zu Touch-Geräten

Die native API bietet auf Mobilgeräten nur eingeschränkte Touch-Unterstützung. Für Touch-optimierte Apps sollten Sie Pointer Events oder eine spezielle Bibliothek in Betracht ziehen. Ihre Stärken spielt die native API auf Desktopgeräten aus.

Textauswahl deaktivieren

Beim Ziehen kann versehentlich Text ausgewählt werden. Eine kleine CSS-Regel sorgt für saubere Ziehvorgänge.

/* CSS */
.draggable { user-select: none; }

Kurztest

Testen Sie die Grundlagen des Ziehens.

Rückblick: Elemente ziehbar machen

Sie haben das Ziehen mit draggable="true" aktiviert, dragstart/drag/dragend verarbeitet, Nutzdaten über dataTransfer.setData angehängt, effectAllowed gesetzt und das Quellelement gestaltet. Als Nächstes: Drop-Ziele.

Häufig gestellte Fragen

Ist die Lektion „Elemente ziehbar machen“ kostenlos?

Ja — der vollständige Text von „Elemente ziehbar machen“ 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 „Elemente ziehbar machen“?

Aktivieren Sie das Ziehen und behandeln Sie Drag-Ereignisse. 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 1 von 4.

Wie lange dauert die Lektion „Elemente ziehbar machen“?

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