Lädt...
HTML Drag and Drop
HTML draggable; JS Drop.
Direkte Antwort
dragstart, dragover preventDefault, drop.
Minimal drag and drop
html
HTML Code
<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", (e) => e.dataTransfer.setData("text/plain", "item"));
zone.addEventListener("dragover", (e) => e.preventDefault());
zone.addEventListener("drop", (e) => {
e.preventDefault();
zone.appendChild(item);
});
</script>Ausprobieren
- Beispiel
- ziehen
- Stil
- Tastatur-Alt
Typische Fehler
- preventDefault vergessen
Zusammenfassung
- draggable
- JS
- preventDefault
- a11y
🧠 Testen Sie Ihr Wissen
Bereit zum Start
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
3
Fragen
70%
Zum Bestehen
∞
Zeit
∞
Versuche
📝 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