Utilisation de lAPI HTML5 Drag and Drop

LAPI HTML5 Drag and Drop (DnD) signifie que nous pouvons faire glisser presque tous les éléments de notre page. Dans cet article, nous expliquerons les bases du glisser-déposer et Drop.

Création de contenu déplaçable #

Il est intéressant de noter que dans la plupart des navigateurs, les sélections de texte, les images et les liens sont déplaçables par défaut. Par exemple, si vous faites glisser le Le logo Google sur la recherche Google, vous verrez limage fantôme. Limage peut ensuite être déposée dans la barre dadresse, un élément <input type="file" />, ou même sur le bureau. Pour rendre dautres types de contenu déplaçables vous devez utiliser les API DnD HTML5.

Pour créer un objet glissant, définissez draggable=true sur cet élément. Tout peut être activé par glisser-déposer, des images, des fichiers , des liens, des fichiers ou tout autre balisage sur votre page.

Dans notre exemple, nous «créons une interface pour réorganiser certaines colonnes, qui ont été disposées avec CSS Grid. Le balisage de base pour mes colonnes ressemble à ceci, avec chaque colonne ayant le

attribut défini surtrue.

Voici le CSS pour mes éléments conteneur et boîte. Notez que le seul CSS liée à la fonctionnalité DnD est la propriété cursor: move. Le reste du code contrôle simplement la mise en page et le style des éléments de conteneur et de boîte.

À ce stade, vous allez trouver que vous pouvez faire glisser les éléments, mais rien dautre ne se passera.Pour ajouter la fonctionnalité DnD, nous devons utiliser lAPI JavaScript.

Écoute pour faire glisser des événements #

Il y a un certain nombre de différents événements auxquels sattacher pour surveiller lensemble du processus de glisser-déposer.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Pour gérer le flux DnD, vous avez besoin dune sorte délément source (doù provient le glissement), les données pa yload (ce que vous essayez de déposer), et une cible (une zone pour attraper la goutte). Lélément source peut être une image, une liste, un lien, un objet fichier, un bloc de HTML, etc. La cible est la zone de dépôt (ou un ensemble de zones de dépôt) qui accepte les données que lutilisateur tente de supprimer. Gardez à lesprit que tous les éléments ne peuvent pas être des cibles, par exemple une image ne peut pas être une cible.

Début et fin une séquence de glisser-déposer #

Une fois que vous avez défini les attributs draggable="true" sur votre contenu, attachez un gestionnaire dévénements dragstart pour lancer la séquence DnD pour chaque colonne.

Ce code définira lopacité de la colonne à 40% lorsque lutilisateur commence à la faire glisser, puis la ramènera à 100% lorsque lévénement de glissement se terminera.

Le résultat peut être vu dans la démo Glitch ci-dessous. Faites glisser un élément et il devient opaque. Comme la cible de l dragstart event « est lélément source, définir this.style.opacity à 40% donne à lutilisateur retour visuel indiquant que lélément est la sélection actuelle déplacée.Une fois que vous déposez lélément, bien que la fonctionnalité de suppression ne soit pas en place, lélément source revient à 100% dopacité.

Ajoutez des repères visuels supplémentaires avec dragenter, dragover et dragleave #

Pour aider lutilisateur à comprendre comment interagir avec votre interface, utilisez dragenter, dragover et dragleave gestionnaires dévénements.Dans cet exemple, les colonnes sont des cibles de dépôt en plus dêtre déplaçables.Aidez lutilisateur pour comprendre cela en mettant la bordure en tirets car ils contiennent un élément glissé sur une colonne.Par exemple, dans votre CSS, vous pouvez créer une classe over pour représenter les éléments qui sont des cibles de dépôt:

Ensuite, dans votre J avaScript a configuré les gestionnaires dévénements, ajoutez la classe over lorsque la colonne est glissée dessus, et supprimez-la lorsque nous quittons. Dans le dragend handler, nous nous assurons également de supprimer les classes à la fin du glisser.

Il y a quelques points à couvrir dans ce code :

• Dans le cas de faire glisser quelque chose comme un lien, vous devez empêcher le comportement par défaut du navigateur, qui est de naviguer vers ce lien. Pour ce faire, appelez e.preventDefault() dans lévénement dragover. Une autre bonne pratique consiste à renvoyer false dans ce même gestionnaire.
• Le gestionnaire dévénements dragenter est utilisé pour basculer entre la classe over au lieu de dragover .Si vous utilisez dragover, la classe CSS serait basculée plusieurs fois car lévénement dragover continuait à se déclencher lors dun survol de colonne. cela causerait le le moteur de rendu du navigateur pour effectuer une grande quantité de travail inutile. Garder les redessins au minimum est toujours une bonne idée.Si vous devez utiliser lévénement dragover pour quelque chose, envisagez de limiter ou de supprimer votre écouteur dévénements.

Terminer la suppression #

Pour traiter la suppression réelle, ajoutez un écouteur dévénement pour lévénement drop. Dans le gestionnaire drop, vous devrez empêcher le comportement par défaut du navigateur pour les drops, qui est généralement une sorte de redirection gênante. Vous pouvez empêcher lévénement de bouillonner dans le DOM en appelant e.stopPropagation().

Si vous exécutez le code à ce stade, lélément ne sera pas déposé au nouvel emplacement. Pour ce faire, vous devez utiliser le DataTransfer objet.

La propriété dataTransfer est lendroit où toute la magie DnD se produit. Elle contient les données envoyées dans une action de glissement. dataTransfer est défini dans lévénement dragstart et lu / géré dans lévénement drop. Lappel e.dataTransfer.setData(mimeType, dataPayload) vous permet de définir lobjet « s Type MIME et données utiles.

Dans cet exemple, nous allons permettre aux utilisateurs de réorganiser lordre des colonnes. Pour ce faire, vous devez dabord stocker le HTML de lélément source lors du glisser démarre:

Dans lévénement drop que vous traitez la colonne drop, en définissant le HTML de la colonne source sur le HTML de la colonne cible sur laquelle vous avez déposé, en vérifiant dabord que lutilisateur ne retombe pas sur la même colonne depuis laquelle il a glissé.

Vous pouvez voir le résultat dans la démo suivante, faites glisser et relâchez la colonne A en haut de la colonne B et remarquez comment ils changent de place:

Plus propriétés de glissement #

Lobjet dataTransfer expose les propriétés pour fournir un retour visuel à lutilisateur pendant le processus de glissement. Ces propriétés peuvent également être utilisées pour contrôler la manière dont chaque cible de dépôt répond à un type de données particulier.

• dataTransfer.effectAllowed restric ts quel « type de glisser » lutilisateur peut effectuer sur lélément. Il est utilisé dans le modèle de traitement par glisser-déposer pour initialiser le dropEffect pendant le et dragover. La propriété peut être définie sur les valeurs suivantes: none, copy, copyLink, copyMove, link, linkMove, move, all et uninitialized.
• dataTransfer.dropEffect contrôle les commentaires que lutilisateur reçoit pendant les dragenter et dragover événements.Lorsque lutilisateur survole un élément cible, le curseur du navigateur indiquera quel type dopération va avoir lieu (par exemple une copie, un déplacement, etc.). Leffet peut prendre lune des valeurs suivantes: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) signifie quau lieu dutiliser le navigateur  » Commentaires par défaut sur « image fantôme », vous pouvez éventuellement définir une icône de glissement.

Téléchargement de fichier par glisser-déposer #

Cet exemple simple utilise une colonne comme Faites glisser la source et faites glisser la cible.Cela peut être vu dans une interface utilisateur où lutilisateur est invité à réorganiser les éléments.Dans certaines situations, la cible de glisser et la source peuvent être différentes, comme une interface où lutilisateur doit sélectionner une image pour être le limage principale dun produit en faisant glisser limage sélectionnée sur une cible.

Le glisser-déposer est fréquemment utilisé pour permettre aux utilisateurs de faire glisser des éléments de leur bureau vers une application. La principale différence réside dans votre drop handler.Au lieu dutiliser dataTransfer.getData() pour accéder aux fichiers, leurs données seront contenus dans la propriété dataTransfer.files:

Vous pouvez trouver plus dinformations à ce sujet dans le glisser-déposer personnalisé.