Implémenter le Drag and Drop dans vos pages web avec JavaScript
Publié le
Le drag and drop, ou glisser-déposer, est une fonctionnalité essentielle pour de nombreuses interfaces utilisateurs modernes. Elle permet à un utilisateur de déplacer des éléments à la souris, rendant les applications interactives plus intuitives. Dans cet article, nous allons vous apprendre à créer une interface de gestion de tâches simple, comme un tableau Kanban, où vous pourrez déplacer des éléments entre différentes colonnes.
Comprendre les événements
Le glisser-déposer repose sur plusieurs événements JavaScript. Voici un aperçu des principaux événements :
| Événement | Description | Utilisation courante |
|---|---|---|
| dragstart | Déclenché au début du drag | Enregistrement des données, ajout de styles |
| drag | Déclenché pendant le drag | Mises à jour visuelles (rarement utilisé) |
| dragend | Déclenché à la fin du drag | Réinitialisation des styles, actions finales |
| dragenter | Déclenché quand l'élément entre dans une zone de dépôt | Mise en évidence de la zone |
| dragover | Déclenché quand l'élément est au-dessus d'une zone de dépôt | Prévention du comportement par défaut |
| dragleave | Déclenché quand l'élément quitte une zone de dépôt | Réinitialisation des styles |
| drop | Déclenché quand l'élément est lâché dans une zone de dépôt | Déplacement de l'élément |
event.dataTransfer
L'objet event.dataTransfer joue un rôle central dans le mécanisme du drag and drop. Il permet de stocker et de récupérer des données associées à l'élément déplacé. La méthode setData() est utilisée pour enregistrer des données dans différents formats (texte, URL, etc.), tandis que getData() permet de récupérer ces données lors de l'événement drop. Par exemple, vous pouvez stocker l'ID de l'élément, son contenu HTML ou même des données JSON. En outre, la propriété types de dataTransfer contient une liste des types de données disponibles.
Structure HTML de base
La première étape pour créer une interface de glisser-déposer est de définir la structure HTML. Nous allons créer trois colonnes : "À faire", "En cours" et "Fait". Chaque colonne contiendra une zone de dépôt pour les tâches.
<div class="board">
<div class="column">
<h2>À faire</h2>
<div class="drop-zone" id="todo-zone">
<div id="item-1" class="item" draggable="true">Tâche 1</div>
<div id="item-2" class="item" draggable="true">Tâche 2</div>
</div>
</div>
<div class="column">
<h2>En cours</h2>
<div class="drop-zone" id="in-progress-zone"></div>
</div>
<div class="column">
<h2>Fait</h2>
<div class="drop-zone" id="done-zone"></div>
</div>
</div>
Nous avons maintenant une structure de base avec des zones de dépôt dans chaque colonne, et quelques éléments que nous pourrons déplacer. Les tâches sont définies avec l'attribut draggable="true", ce qui permet de les rendre déplaçables.
Implémenter le Drag and Drop avec JavaScript
Maintenant que nous avons notre structure HTML, passons à l'implémentation du JavaScript nécessaire pour rendre les tâches déplaçables. Nous allons écouter les événements dragstart, dragover et drop pour permettre aux éléments de se déplacer entre les colonnes.
// Sélection des éléments déplaçables
const items = document.querySelectorAll('.item');
// Ajout des événements de drag à chaque élément
items.forEach(item => {
item.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.id);
});
});
// Sélection des zones de dépôt
const dropZones = document.querySelectorAll('.drop-zone');
// Ajout des événements de drop et dragover à chaque zone
dropZones.forEach(zone => {
zone.addEventListener('dragover', function(event) {
event.preventDefault(); // Nécessaire pour autoriser le drop
});
zone.addEventListener('drop', function(event) {
event.preventDefault();
const draggedElementId = event.dataTransfer.getData('text');
const draggedElement = document.getElementById(draggedElementId);
// On vérifie que l'élément est bien déposé dans la zone de dépôt
if (event.target.classList.contains('drop-zone')) {
event.target.appendChild(draggedElement);
}
});
});
Dans ce code, chaque élément de la classe .item est associé à l'événement dragstart, où nous stockons l'ID de l'élément en train d'être déplacé dans dataTransfer. Lorsqu'un élément est déplacé sur une zone de dépôt (événement dragover), nous autorisons le dépôt en appelant event.preventDefault(). Enfin, lors du dépôt drop, nous récupérons l'élément et l'ajoutons à la nouvelle zone de dépôt.
Exemple Pratique : Gestion de Tâches (Kanban)
Voici un exemple interactif où vous pouvez faire glisser et déposer des tâches entre les colonnes "À faire", "En cours", et "Fait". Essayez-le ci-dessous :