Chargement...

Glisser déposer HTML

Le glisser-déposer HTML (HTML Drag and Drop) est une fonctionnalité native introduite avec HTML5 qui permet aux utilisateurs de cliquer sur un élément, de le faire glisser et de le déposer ailleurs dans la page web. C'est une interaction naturelle et visuelle, comparable à l'organisation d'une bibliothèque : on déplace des livres d'une étagère à une autre selon les besoins.
Dans un site portfolio, on peut permettre aux utilisateurs de réorganiser des projets ; sur un blog, de réorganiser des widgets ; en e-commerce, de faire glisser des produits vers un panier ; sur un site d'actualité, de personnaliser l'ordre des articles ; et dans une plateforme sociale, de modifier l'ordre des posts favoris.
Ce tutoriel avancé va vous enseigner comment activer le glisser-déposer via les attributs HTML comme draggable, les événements dragstart, dragover, drop, et comment interagir avec l'interface DataTransfer de JavaScript. Vous apprendrez à créer une interaction fluide, accessible et maintenable en intégrant du code HTML, CSS et JavaScript.

Exemple de Base

html
HTML Code 
<!-- Basic draggable element and drop target -->
<div id="drag" draggable="true">Faites-moi glisser</div>
<div id="zone" ondrop="drop(event)" ondragover="allowDrop(event)">Déposez ici</div>

<script>
function allowDrop(ev) {
ev.preventDefault(); // Allow drop by preventing default behavior
}
function drop(ev) {
ev.preventDefault();
const data = document.getElementById("drag");
ev.target.appendChild(data); // Move the dragged element
}
</script>

Dans cet exemple de base, nous créons un élément pouvant être glissé (draggable="true") et une zone de dépôt qui peut réagir au déplacement.
L'élément avec id="drag" est rendu déplaçable. Sans draggable="true", le navigateur n'autorisera pas le déclenchement de l'événement dragstart. La zone avec id="zone" implémente deux gestionnaires d'événements : ondragover et ondrop. Le premier utilise ev.preventDefault() pour permettre le drop, car le comportement par défaut des navigateurs est de refuser l'opération. Le second récupère l'élément avec getElementById("drag") et l'insère dans la zone cible via appendChild().
Ce code est léger, mais illustre bien le mécanisme fondamental. En contexte réel, on utiliserait dataTransfer.setData() et getData() pour identifier dynamiquement plusieurs éléments, notamment dans une boutique où chaque produit a un identifiant unique.

Exemple Pratique

html
HTML Code 
<!-- Drag and drop products in e-commerce -->
<ul id="produits">
<li id="p1" draggable="true" ondragstart="drag(event)">Produit A</li>
<li id="p2" draggable="true" ondragstart="drag(event)">Produit B</li>
</ul>

<div id="panier" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>Panier</strong>
</div>

<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
const id = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(id));
}
</script>

Bonnes pratiques et erreurs courantes :
Bonnes pratiques :

  1. Utilisez des balises HTML sémantiques comme <ul>, <li>, <section> pour conserver une structure logique.
  2. Fournissez un retour visuel pendant le dragover (ex. : changement de bordure).
  3. Rendez vos interactions accessibles : utilisez aria-grabbed, aria-dropeffect pour les lecteurs d'écran.

  4. Isolez JavaScript du HTML pour une meilleure maintenance (via addEventListener).
    Erreurs courantes :

  5. Oublier preventDefault() dans ondragover, bloquant le drop.

  6. Réutiliser le même id plusieurs fois, ce qui fausse le comportement.
  7. Négliger la compatibilité mobile : le glisser-déposer HTML ne fonctionne pas nativement sur écrans tactiles.
  8. Manipuler dataTransfer sans vérifier si les données sont bien récupérées.
    Astuces debug : Utilisez console.log() dans vos gestionnaires d'événements pour inspecter le flux. Testez dans différents navigateurs pour valider la compatibilité.

📊 Référence Rapide

Property/Method Description Example
draggable Rend un élément déplaçable <div draggable="true">
ondragstart Déclenché au début du glissement ondragstart="drag(event)"
ondrop Déclenché lors du dépôt ondrop="drop(event)"
ondragover Nécessaire pour autoriser le dépôt ondragover="allowDrop(event)"
dataTransfer.setData() Stocke les données du glisser ev.dataTransfer.setData("text", id)
dataTransfer.getData() Récupère les données lors du dépôt ev.dataTransfer.getData("text")

Résumé et prochaines étapes :
Vous maîtrisez maintenant le fonctionnement du glisser-déposer HTML, de la définition des éléments déplaçables jusqu'à leur dépôt conditionnel via JavaScript. Ce mécanisme permet de créer des interfaces intuitives et interactives, idéales pour des cas comme les interfaces de paniers, l'organisation des modules utilisateur, ou la réorganisation de contenu personnalisé.
Cette compétence peut être approfondie via l'ajout de CSS dynamique pour les effets visuels pendant le glissement, ou la persistance des états avec des bases de données ou du stockage local.
Sujets suggérés pour aller plus loin :

  • Glisser-déposer de fichiers (upload)
  • Intégration dans des composants React ou Vue
  • Compatibilité avec mobile via touchstart/touchmove
  • Utilisation de bibliothèques comme SortableJS ou Dragula

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez vos Connaissances

Testez votre compréhension de ce sujet avec des questions pratiques.

❓
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
Sujet 22 de 51
Html Tutoriel