HTML Drag and Drop
Auparavant, Geolocation demandait des coordonnées après permission. Cette leçon quitte les coordonnées et présente le glisser-déposer HTML : marquer ce qui se glisse, porter une petite charge avec dataTransfer, décider le drop. Portée pratique — draggable, preventDefault, déplacer ou étiqueter — pas de lib sortable ni app d’upload.
Pourquoi le glisser-déposer dans un cours HTML
Les débutants veulent souvent glisser une carte dans une boîte. Le DnD natif est la première API courante. Après Geolocation, la division diffère : HTML marque les sources ; JS possède les événements et le sens du drop.
Réponse directe
1) draggable="true". 2) setData dans dragstart. 3) preventDefault sur dragover. 4) Dans drop, getData et changez DOM/UI. 5) Pas de balise dropzone spéciale. 6) Si important, chemin bouton/clavier.
📊 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) |
Minuscule démo de déplacement
Boîte bleue draggable ; au dépôt elle entre dans la zone. Sans preventDefault sur dragover, drop échoue souvent.
<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>
Lire les appels de déplacement
- draggable démarre le geste
- dragstart pose dataTransfer
- dragover + preventDefault autorise drop
- drop modifie le DOM
- Contrairement à Geolocation : pas de coordonnées appareil
- Gardez la démo petite
Démo de charge dataTransfer
Parfois vous ne déplacez pas le même nœud — vous portez un texte et l’affichez au dépôt quand plusieurs sources partagent une cible.
<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>
Lire l’idée dataTransfer
- setData/getData transportent une courte chaîne
- text/plain convient aux débutants
- Plusieurs sources, une cible
- Pas un produit d’upload
- Pas Geolocation
- Ensuite : web workers
Quand utiliser le DnD
- Carte vers zone claire : bon fit intro
- Action critique sans alternative : mauvais
- Thème : Web Storage
- GPS : c’était Geolocation
- Kanban complet : hors de cette intro
Pratique — glisser, déposer, étiqueter
- Testez la démo de déplacement.
- Retirez preventDefault un instant et voyez l’échec.
- Testez la démo dataTransfer.
- Optionnel : bouton sans glisser.
- Phrase : Geolocation lit des coordonnées ; DnD déplace ou étiquette.
- Préférez une vraie fenêtre navigateur.
- Aperçu : web workers.
Erreurs faciles
- Oublier preventDefault sur dragover
- UI DnD-only sans alternative
- Attendre une balise dropzone
- Confondre avec Geolocation
- Surutiliser DnD au lieu d’un bouton
- Prendre l’intro pour un cours sortable complet
Résumé
- Le DnD utilise draggable, dataTransfer et les trois événements
- preventDefault sur dragover est souvent nécessaire
- HTML marque les sources ; le script définit le drop
- Offrez un chemin sans glisser si besoin
- Geolocation était des coordonnées ; cette leçon déplacer/étiqueter au pointeur
- Suivant : web workers
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 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