HTML Drag and Drop
Zuvor holte Geolocation nach Erlaubnis Koordinaten. Diese Lektion verlässt Koordinaten und stellt HTML Drag and Drop vor: markieren was ziehbar ist, kleine Nutzlast mit dataTransfer, und entscheiden was beim Drop passiert. Praxis — draggable, preventDefault auf dragover, Verschieben/Beschriften — keine Sortable-Bibliothek oder File-Upload-App.
Warum Drag and Drop in einem HTML-Kurs
Anfänger wollen oft „Karte in Box ziehen“. Natives DnD ist die übliche erste API. Nach Geolocation ist die Trennung anders: HTML markiert Quellen; JS besitzt Events und Drop-Bedeutung.
Direkte Antwort
1) draggable="true". 2) setData in dragstart. 3) preventDefault auf dragover. 4) In drop getData und DOM/UI ändern. 5) Kein spezielles Dropzone-Tag. 6) Bei wichtigen Aktionen Button/Tastatur-Pfad.
📊 dragstart vs dragover vs drop
| Topic | dragstart | dragover | drop |
|---|---|---|---|
| Typical role | Start drag; set dataTransfer | Allow drop (preventDefault) | Apply the result |
| Runs on | Draggable source | Potential target (often) | Drop target |
| Must preventDefault? | Usually no | Yes — so drop can fire | Yes — avoid default navigation quirks |
| Beginner payload | setData("text/plain", id) | — | getData + move/label |
| This course depth | Required | Required | Required (simple move/label) |
Winziges Verschiebe-Demo
Blaue Box ist ziehbar; bei Drop landet sie in der Zone. Ohne preventDefault auf dragover feuern Drops oft nicht.
<div id="item" draggable="true" style="padding:8px;background:#cdf;width:120px;">Drag me</div>
<div id="zone" style="margin-top:12px;padding:24px;border:2px dashed #666;">Drop here</div>
<script>
const item = document.getElementById("item");
const zone = document.getElementById("zone");
item.addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", "item");
});
zone.addEventListener("dragover", function (e) {
e.preventDefault();
});
zone.addEventListener("drop", function (e) {
e.preventDefault();
zone.appendChild(item);
});
</script>
Die Verschiebe-Aufrufe lesen
- draggable startet die Geste
- dragstart setzt dataTransfer
- dragover + preventDefault erlaubt Drop
- drop ändert das DOM
- Anders als Geolocation: keine Gerätekoordinaten
- Demo klein halten
dataTransfer-Nutzlast-Demo
Manchmal verschieben Sie denselben Knoten nicht — Sie tragen einen Text und zeigen ihn beim Drop, wenn mehrere Quellen ein Ziel teilen.
<p id="a" draggable="true" style="display:inline-block;padding:6px;background:#fec;margin-right:8px;">Alpha</p>
<p id="b" draggable="true" style="display:inline-block;padding:6px;background:#cfe;margin-right:8px;">Beta</p>
<div id="tray" style="margin-top:12px;padding:16px;border:2px dashed #444;">Drop a label here</div>
<pre id="note"></pre>
<script>
const tray = document.getElementById("tray");
const note = document.getElementById("note");
function arm(id, label) {
document.getElementById(id).addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", label);
});
}
arm("a", "Alpha");
arm("b", "Beta");
tray.addEventListener("dragover", function (e) {
e.preventDefault();
});
tray.addEventListener("drop", function (e) {
e.preventDefault();
note.textContent = "Dropped: " + e.dataTransfer.getData("text/plain");
});
</script>
Die dataTransfer-Idee lesen
- setData/getData transportieren kurze Strings
- text/plain ist anfängerfreundlich
- Mehrere Quellen, ein Ziel
- Kein File-Upload-Produkt
- Kein Geolocation
- Als Nächstes: web workers
Wann DnD nutzen
- Karte in klare Zone: guter Intro-Fit
- Kritische Aktion ohne Alternative: schlecht
- Theme speichern: Web Storage
- GPS: war Geolocation
- Volles Kanban: jenseits dieses Intros
Übung — ziehen, ablegen, beschriften
- Verschiebe-Demo testen.
- preventDefault kurz entfernen und Drop-Ausfall sehen.
- dataTransfer-Demo testen.
- Optional Button ohne Drag.
- Satz: Geolocation liest Koordinaten; DnD verschiebt/beschriftet.
- Echtes Browserfenster bevorzugen.
- Ausblick: web workers.
Typische Fehler
- preventDefault auf dragover vergessen
- Nur-DnD-UI ohne Alternative
- Dropzone-Tag erwarten
- Mit Geolocation verwechseln
- DnD übernutzen statt Button
- Intro als vollen Sortable-Kurs nehmen
Zusammenfassung
- DnD nutzt draggable, dataTransfer und die drei Events
- preventDefault auf dragover ist oft nötig
- HTML markiert Quellen; Skript definiert Drop
- Nicht-Drag-Pfad anbieten wenn nötig
- Geolocation waren Koordinaten; diese Lektion Zeiger-Verschieben/Beschriften
- Als Nächstes: web workers
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt