Comment utiliser l'API HTML Glisser-Déposer

Le glisser-déposer est une fonctionnalité essentielle qui améliore l’interaction utilisateur et facilite une expérience utilisateur transparente. Que vous cherchiez à créer un outil de téléchargement de fichiers, une liste triable ou un jeu interactif, comprendre comment exploiter les capacités de cette API est une compétence cruciale à avoir dans votre site Web boîte à outils de développement.

Les bases du glisser-déposer en HTML

Dans un système glisser-déposer typique, il existe deux types d'éléments: le premier type comprend des éléments déplaçables que les utilisateurs peut se déplacer avec une souris, et le deuxième type comprend des éléments déposables qui spécifient généralement où les utilisateurs peuvent placer un élément.

Pour implémenter le glisser-déposer, vous devez indiquer au navigateur quels éléments vous souhaitez pouvoir déplacer. Pour qu'un élément puisse être déplacé par l'utilisateur, cet élément doit avoir un

déplaçableAttribut HTML mis à vrai, comme ça:

<divdraggable="true">This element is draggablediv>

Lorsque l'utilisateur commence à déclencher un événement de glissement, le navigateur fournit une image « fantôme » par défaut qui fournit généralement des informations sur un élément en cours de déplacement.

Vous pouvez personnaliser cette image en fournissant votre propre image à la place. Pour ce faire, sélectionnez l'élément déplaçable dans le DOM, créez une nouvelle image pour représenter l'image de retour personnalisée et ajoutez un glisser-démarrer faites glisser l'écouteur d'événement comme ceci :

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 bloc de code ci-dessus, le setDragImage La méthode a trois paramètres. Le premier paramètre fait référence à l'image. Les autres paramètres représentent respectivement les décalages horizontaux et verticaux de l'image. Lorsque vous exécutez le code dans le navigateur et commencez à faire glisser un élément, vous remarquerez que l'image de déplacement personnalisée a été remplacée par l'image personnalisée définie précédemment.

Si vous souhaitez autoriser une suppression, vous devez empêcher le comportement par défaut en annulant à la fois le draguer et trainer des événements, comme celui-ci :

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Comprendre l'interface DragEvent

JavaScript propose un DragEvent interface qui représente une interaction glisser-déposer de la part de l'utilisateur. Vous trouverez ci-dessous une liste de types d'événements possibles sous le DragEvent interface.

• traîner: L'utilisateur déclenche cet événement en faisant glisser un élément.
• dragende: Cet événement se déclenche lorsque l'opération de glisser se termine ou lorsque l'utilisateur l'interrompt. Une opération de glisser typique peut se terminer en relâchant le bouton de la souris ou en appuyant sur la touche d'échappement.
• draguer: Un élément glissé déclenche cet événement lorsqu'il entre dans une cible de dépôt valide.
• glisser: Lorsque l'élément glissé quitte une cible de dépôt, cet événement se déclenche.
• trainer: Lorsque l'utilisateur fait glisser un élément déplaçable sur une cible de dépôt, l'événement se déclenche.
• glisser-démarrer: L'événement se déclenche au début d'une opération de glissement.
• baisse: L'utilisateur déclenche cet événement lorsqu'il dépose un élément sur une cible de dépôt.

Lorsque vous faites glisser un fichier dans le navigateur depuis un environnement extérieur au navigateur (par exemple, le gestionnaire de fichiers du système d'exploitation), le navigateur ne déclenche pas le glisser-démarrer ou dragende événements.

DragEvent peut s'avérer utile si vous souhaitez envoyer un événement de glisser personnalisé par programme. Par exemple, si vous souhaitez un div pour déclencher des événements de glisser personnalisés lors du chargement de la page, voici comment procéder. Tout d'abord, créez une nouvelle coutume DragEvent() comme ça:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

Dans le bloc de code ci-dessus, personnaliséDragStartEvent représente un exemple de DragEvent(). Dans personnaliséDragStartEvent, il existe deux arguments de constructeur. Le premier représente le type d’événement glisser, qui peut être l’un des sept types d’événements mentionnés précédemment.

Le deuxième argument est un objet avec un transfert de données clé représentant une instance de Transfert de données, sur lequel vous en apprendrez davantage plus loin dans ce guide. Ensuite, récupérez l'élément à partir duquel vous souhaitez déclencher l'événement, dans le Modèle objet de document (DOM).

const draggableElement = document.querySelector("#draggable");

Ajoutez ensuite les écouteurs d'événement comme ceci :

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

Dans le premier écouteur d'événement ci-dessus, la fonction de rappel enregistre le texte « Drag démarré! » et invoque le setData méthode sur le transfert de données propriété sur le événement objet. Maintenant, vous pouvez déclencher les événements personnalisés comme ceci :

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Transférer des données avec dataTransfer

Le transfert de données L'objet sert de pont entre l'élément source (l'élément déplaçable) et l'élément cible (la zone déposable) lors d'une opération de glisser-déposer. Il agit comme un conteneur de stockage temporaire pour les données que vous souhaitez partager entre ces éléments.

Ces données peuvent prendre diverses formes, telles que du texte, des URL ou des types de données personnalisés, ce qui en fait un outil polyvalent pour implémenter un large éventail de fonctionnalités de glisser-déposer.

Utilisation de setData() pour empaqueter des données

Pour transférer des données d'un élément déplaçable vers un élément déposable, vous utiliserez le setData() méthode fournie par le transfert de données objet. Cette méthode vous permet de regrouper les données que vous souhaitez transférer et de spécifier le type de données. Voici un exemple de base :

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Lorsqu'un utilisateur commence à faire glisser l'élément spécifié, setData() regroupe le texte « Bonjour tout le monde! » avec le type de données texte simple. Ces données sont désormais associées à l'événement glisser et sont accessibles par la cible déposable pendant 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 d'un élément droppable, vous pouvez récupérer les données transférées à l'aide du getData() méthode:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Le bloc de code ci-dessus récupère les données avec le même type de données (texte simple) qui a été défini à l'aide de setData() méthode plus tôt. Cela vous permet d'accéder et de manipuler les données transférées selon vos besoins dans le contexte de l'élément déposable.

Cas d'utilisation des interfaces glisser-déposer

L'intégration de la fonctionnalité glisser-déposer dans vos applications Web peut constituer une amélioration puissante, mais il est essentiel de comprendre quand et pourquoi vous devez la mettre en œuvre.

• Téléchargeurs de fichiers: Permettre aux utilisateurs de faire glisser des fichiers directement depuis leur bureau ou leur gestionnaire de fichiers vers une zone de dépôt désignée simplifie le processus de téléchargement.
• Listes triables: si votre application implique des listes d'éléments, telles que des listes de tâches, des listes de lecture ou des galeries d'images, les utilisateurs apprécieront peut-être la possibilité de réorganiser les éléments par glisser-déposer.
• Tableaux de bord interactifs: Pour outils de visualisation de données et de reporting, le glisser-déposer peut être un moyen puissant pour les utilisateurs de personnaliser leurs tableaux de bord en réorganisant les widgets et les graphiques.

Garder l’accessibilité à l’esprit

Même si le glisser-déposer peut être visuellement attrayant et améliorer l'expérience utilisateur, il est crucial de garantir que votre implémentation reste accessible à tous les utilisateurs, y compris ceux handicapés. Proposez des méthodes alternatives d'interaction, telles que des commandes au clavier, pour rendre votre application inclusive.