L’API HTML5 glisser-déposer (DnD) signifie que presque n’importe quel élément d’une page peut devenir glissable. Dans cet article, nous allons couvrir les bases du glisser-déposer.
Créer du contenu glissable
Il est important de noter que dans la plupart des navigateurs, les sélections de texte, les images et les liens sont glissables par défaut. Par exemple, si vous faites glisser le logo Google dans Google Search, vous verrez une image fantôme. L’image peut ensuite être glissée et déposée dans la barre d’adresse, <input type="file » /> élément, ou même sur le bureau. Pour que d’autres types de contenu soient facilement glissables, il faut utiliser l’API HTML5 DnD.
Pour rendre un objet glissable, on définit l’élémenttraînable=vrai。 Le glisser peut être pris en charge pour presque tous les éléments, y compris les images, fichiers, liens, fichiers ou tout balisage sur une page.
Dans notre exemple, nous allons créer une interface pour réarranger certaines colonnes, qui ont été disposées via CSS Grid. Le balisage de base pour ces colonnes est montré ci-dessous, avec la propriété de glissage réglée sur vrai pour chaque colonne.
Voici le CSS pour mes éléments conteneur et boîte. Notez que le seul CSS lié à la fonctionnalité de DnD est la propriété curseur : mover. Le reste du code ne contrôle que la disposition et le style des éléments du conteneur et de la boîte.
À ce stade, vous verrez que vous pouvez glisser l’objet mais rien d’autre ne se passera. Pour ajouter des fonctionnalités DnD, nous devons utiliser l’API JavaScript.
Écoutez les événements drag
De nombreux événements différents peuvent être attachés pour surveiller l’ensemble du processus de glisser-déposer.
- Démarrage de drag
- traîner
- Dragenter
- Dragleave
- Dragover
- goutte
- Dragend
Pour traiter un flux DnD, il faut un élément source (le point de départ du traîné), la charge utile de données (ce que vous essayez de placer), et la cible (la zone où le claquement est placé). Les éléments sources peuvent être des images, des listes, des liens, des objets fichiers, des blocs HTML, etc. L’objectif est d’accepter la zone de largage (ou l’ensemble des zones de largage) des données que l’utilisateur essaie de placer. Gardez à l’esprit que tous les éléments ne peuvent pas être des objectifs, par exemple, les images ne peuvent pas être des objectifs.
Début et fin de la séquence de glisser-déposer
Après avoir défini la propriété draggable="true » sur le contenu, attachez un gestionnaire d’événements drag start pour lancer la séquence DnD de chaque colonne.
Ce code réglera l’opacité de la colonne à 40 % lorsque l’utilisateur commence à traîner, puis la reviendra à 100 % à la fin de l’événement de traînée.
Les résultats peuvent être consultés dans la démo Glitch ci-dessous. Faites glisser un objet et il deviendra opaque. Puisque l’événement de démarrage par drag cible l’élément source, régler cette opacité style.à 40 % donne à l’utilisateur un retour visuel indiquant que l’élément sélectionné actuellement est en mouvement. Après le placement de l’élément, l’élément source revient à une opacité de 100 %, bien que la fonction de placement n’ait pas encore été écrite.
Utilisez dragenter, dragover et dragleave pour ajouter des indices visuels supplémentaires
Pour aider les utilisateurs à comprendre comment interagir avec votre interface, utilisez des gestionnaires d’événements dragenter, dragover et dragleave. Dans l’exemple suivant, les colonnes peuvent être glissées ou ciblées. Pour aider les utilisateurs à comprendre cela, lorsqu’ils glissent un élément au-delà d’une colonne, la bordure de cette colonne devient une ligne pointillée. Par exemple, vous pouvez créer une classe supérieure dans CSS pour représenter un élément qui est une cible de placement :
Ensuite, configurez un gestionnaire d’événements en JavaScript pour ajouter la classe over en glissant au-delà d’une colonne et la supprimer en quittant. Dans le manipulateur de traînée, nous voulons aussi nous assurer que la classe est retirée à la fin du traîné.
Il y a quelques points à mentionner dans ce code :
En glissant un élément tel qu’un lien, vous devez bloquer le comportement par défaut du navigateur, qui est de naviguer vers ce lien. Pour cela, appelez e.preventDefault() dans l’événement de dragover. Une autre bonne pratique est de retourner faux dans le même manipulateur.
Utilisez le gestionnaire d’événements dragenter pour changer de classe, pas le dragover. Si vous utilisez dragover, la classe CSS est activée plusieurs fois car le dragover d’événements se déclenche sans cesse lorsque la colonne survole. Finalement, cela fera que le moteur de rendu du navigateur effectuera beaucoup de travail inutile. Il vaut mieux toujours garder le redessin au minimum. Si vous devez utiliser des événements dragover pour une raison quelconque, envisagez de limiter ou de supprimer les auditeurs d’événements.
Terminez la mise en place
Pour gérer le placement réel, ajoutez un écouteur d’événement pour l’événement de chute. Dans un gestionnaire de drop, il faut bloquer le comportement de placement par défaut du navigateur, qui est généralement une sorte de redirection agaçante. e.stopPropagation() peut être appelé pour empêcher l’événement de déclencher le DOM.
Assurez-vous d’enregistrer le nouveau gestionnaire dans l’autre gestionnaire :
Si vous exécutez le code à ce moment-là, le projet ne sera pas placé dans un nouvel emplacement. Pour cela, vous devez utiliser un objet DataTransfer.
La propriété dataTransfer est là où se produisent toutes les merveilles de DnD. Il sauvegarde les fragments de données envoyés lors de l’opération de traînée. dataTransfer est défini dans l’événement de démarrage et est lu/traité lors de l’événement de dépôt. Appelez e.dataTransfer.setData(mimeType, dataPayload) pour définir le type MIME et la charge utile de données de l’objet.
Dans l’exemple suivant, nous permettrons aux utilisateurs de réarranger l’ordre des colonnes. Pour cela, vous devez d’abord stocker le HTML de l’élément source au début du traînage :
Gérer le placement des colonnes dans l’événement de drop, définir le HTML de la colonne source sur le HTML de la colonne cible où il est placé, vérifier d’abord que la colonne cible glissée et déposée par l’utilisateur est la même que la colonne source.
Plus de propriétés de traînée
L’objet dataTransfer expose des propriétés qui servent à fournir un retour visuel à l’utilisateur pendant le processus de glissage. Ces propriétés peuvent également être utilisées pour contrôler la façon dont chaque destination de placement réagit à des types de données spécifiques.
- dataTransfer.effectAllowed limite le « type de traînée » qu’un utilisateur peut effectuer sur un élément. Il est utilisé dans le modèle de gestion du glisser-déposer pour initialiser DropEffect lors des événements de dragenter et de dragover. Cette propriété peut être réglée aux valeurs suivantes : none, copy, copyLink, copyMove, link, linkMove, move, all, et uninitialized.
- dataTransfer.dropEffect contrôle le retour d’information fourni à l’utilisateur lors des événements de dragenter et de dragover. Lorsque l’utilisateur survole l’élément cible, le curseur du navigateur indique le type d’action à effectuer (par exemple, copier, déplacer, etc.). L’effet peut être l’une des valeurs suivantes : aucun, copier, lien, déplacer.
- e.dataTransfer.setDragImage(imgElement, x, y) indique que le retour d’information « image fantôme » par défaut du navigateur n’est pas utilisé, et qu’il existe à la place une option pour définir l’icône de glisser.
Téléverser des fichiers en glissant-déposer
L’exemple simple suivant utilise une colonne comme source de traînée et cible de traînée. Cela peut être observé dans l’interface utilisateur lorsqu’on demande à l’utilisateur de réarranger les éléments. Dans certains cas, le traînage de la cible et le traînage de la source peuvent être différents, comme dans une interface où l’utilisateur doit sélectionner une image comme image principale du produit en faisant glisser l’image sélectionnée sur la cible.
Le glisser-déposer est souvent utilisé pour permettre aux utilisateurs de déplacer des éléments depuis le bureau vers l’application. La principale différence réside dans le gestionnaire de largage. Sans utiliser dataTransfer.getData() pour accéder au fichier, les données du fichier seront incluses dans la propriété dataTransfer.files :
Lien original :La connexion hyperlientérée est visible.
|
Publié le 26-04-2022 à 10:30:50
|
|
|
|
Publié le 26-04-2022 à 21:27:25
|
