Chargement...
Drag and Drop HTML
HTML draggable ; JS drop.
Réponse directe
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>Essaie
- coller
- glisser
- style
- clavier
Erreurs courantes
- oublier preventDefault
Résumé
- draggable
- JS
- preventDefault
🧠 Testez Vos Connaissances
Prêt à Commencer
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
3
Questions
70%
Pour Réussir
∞
Temps
∞
Tentatives
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut