Comment utiliser l'API HTML Glisser-Déposer
Le mécanisme de glisser-déposer représente une fonctionnalité fondamentale qui améliore l'interaction utilisateur et favorise une expérience fluide. Que votre objectif soit de concevoir un outil de transfert de fichiers, une liste réorganisable ou un jeu interactif, la maîtrise de cette API est une compétence indispensable dans votre panoplie de développeur web.
Les Fondamentaux du Glisser-Déposer en HTML
Un système de glisser-déposer typique comprend deux catégories d'éléments : les éléments déplaçables que les utilisateurs peuvent manipuler avec la souris, et les éléments cibles où ils peuvent être déposés.
Pour mettre en œuvre le glisser-déposer, vous devez indiquer au navigateur quels éléments sont déplaçables. Un élément doit posséder l'attribut HTML draggable défini sur true pour être déplacé par l'utilisateur. Par exemple :
<div draggable="true">Cet élément est déplaçable</div>
Lorsqu'un utilisateur initie une opération de glisser, le navigateur génère une image "fantôme" par défaut qui fournit un aperçu de l'élément en cours de déplacement.
Il est possible de personnaliser cette image en définissant la vôtre. Pour cela, sélectionnez l'élément déplaçable dans le DOM, créez une nouvelle image et associez un écouteur d'événement dragstart comme suit :
let img = new Image();
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png";document.querySelector('div').addEventListener('dragstart', (event)=>{
event.dataTransfer.setDragImage(img, 10, 10);
})
Dans le code ci-dessus, la méthode setDragImage prend trois paramètres. Le premier est l'image, et les deux suivants représentent les décalages horizontal et vertical de l'image. Lors de l'exécution, l'image par défaut est remplacée par l'image personnalisée définie.
Pour permettre le dépôt, il faut neutraliser le comportement par défaut en annulant les événements dragenter et dragover :
const dropElement = document.querySelector("drop-target");dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Comprendre l'Interface DragEvent
JavaScript expose une interface DragEvent qui symbolise une interaction de glisser-déposer initiée par l'utilisateur. Voici les différents types d'événements associés à cette interface :
drag: cet événement est déclenché lorsque l'utilisateur déplace un élément.dragend: se produit lorsque l'opération de glisser se termine ou est interrompue par l'utilisateur. La fin peut être causée par le relâchement du bouton de la souris ou la pression de la touche Échap.dragenter: un élément déplacé déclenche cet événement lorsqu'il entre dans une zone de dépôt valide.dragleave: l'événement se déclenche lorsque l'élément déplacé quitte une zone de dépôt.dragover: l'événement se produit lorsque l'utilisateur fait glisser un élément au-dessus d'une zone de dépôt.dragstart: cet événement est déclenché au début d'une opération de glisser.drop: l'événement se produit lorsque l'utilisateur dépose un élément sur une zone de dépôt.
Lorsqu'un fichier est glissé depuis l'extérieur du navigateur (par exemple, depuis l'explorateur de fichiers du système d'exploitation), les événements dragstart et dragend ne sont pas déclenchés.
L'interface DragEvent peut être utile pour déclencher des événements de glisser personnalisés de manière programmatique. Par exemple, si vous souhaitez qu'un élément div déclenche des événements de glisser au chargement de la page, voici comment procéder. Tout d'abord, créez un nouvel objet DragEvent() personnalisé :
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');
Dans ce code, customDragStartEvent représente une instance de DragEvent(). Le constructeur accepte deux arguments : le type d'événement (parmi les sept cités précédemment) et un objet avec une clé dataTransfer (que nous allons aborder plus loin). Ensuite, récupérez l'élément que vous souhaitez manipuler via le DOM :
const draggableElement = document.querySelector("#draggable");
Ajoutez ensuite les écouteurs d'événements :
draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
event.dataTransfer.setData('text/plain', 'Hello, world!');
}); draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
});
Le premier écouteur d'événement enregistre le message "Drag démarré !" et utilise la méthode setData sur la propriété dataTransfer. Enfin, déclenchez les événements personnalisés :
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
Transférer des Données avec dataTransfer
L'objet dataTransfer joue un rôle crucial en tant que passerelle entre l'élément source (l'élément déplaçable) et l'élément cible (la zone de dépôt) pendant une opération de glisser-déposer. Il sert de conteneur temporaire pour les données partagées entre ces éléments.
Ces données peuvent prendre différentes formes : texte, URL ou types de données personnalisés, ce qui en fait un outil polyvalent pour implémenter de nombreuses fonctionnalités de glisser-déposer.
Utilisation de setData() pour Emballer des Données
Pour transmettre des données d'un élément déplaçable à un élément déposable, vous utiliserez la méthode setData() fournie par l'objet dataTransfer. Cette méthode permet de regrouper les données à transférer et de préciser leur type. Voici un exemple :
element.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
Lorsqu'un utilisateur commence à faire glisser l'élément spécifié, setData() associe le texte "Bonjour tout le monde !" au type de données text/plain. Ces données sont maintenant liées à l'événement de glisser et sont accessibles par l'élément cible durant l'opération de dépôt.
Récupérer des Données avec getData()
Du côté de la réception, dans l'écouteur d'événements de l'élément déposable, vous pouvez récupérer les données transférées à l'aide de la méthode getData() :
element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});
Le code ci-dessus récupère les données avec le même type (text/plain) défini précédemment avec setData(). Cela permet d'accéder aux données et de les manipuler en fonction des besoins.
Cas d'Utilisation des Interfaces Glisser-Déposer
L'intégration du glisser-déposer dans vos applications web peut être un atout considérable. Il est essentiel de bien comprendre quand et pourquoi l'utiliser.
- Téléchargeurs de fichiers : Permettre aux utilisateurs de glisser directement des fichiers depuis leur bureau simplifie le processus de téléchargement.
- Listes triables : Dans les applications avec listes d'éléments (listes de tâches, listes de lecture, galeries d'images), le glisser-déposer améliore l'expérience utilisateur.
- Tableaux de bord interactifs : Pour les outils de visualisation de données, le glisser-déposer permet aux utilisateurs de personnaliser leur tableau de bord en réorganisant les widgets.
Garder l'Accessibilité à l'Esprit
Bien que le glisser-déposer soit attrayant et améliore l'expérience utilisateur, il est crucial de s'assurer que sa mise en œuvre reste accessible à tous, y compris aux personnes handicapées. Proposez des méthodes d'interaction alternatives, comme les commandes au clavier, pour que votre application soit inclusive.