Comment créer des éléments par glisser-déposer avec JavaScript vanille et HTML

Introduction

Le glisser-déposer est une interaction utilisateur courante que vous pouvez trouver dans de nombreuses interfaces utilisateur graphiques.

Il existe des bibliothèques JavaScript préexistantes pour ajouter une fonctionnalité de glisser-déposer à votre application. Cependant, il peut y avoir des situations dans lesquelles une bibliothèque nest pas disponible ou introduit une surcharge ou une dépendance dont votre projet na pas besoin. Dans ces situations, la connaissance des API disponibles dans les navigateurs Web modernes peut offrir des solutions alternatives.

LAPI HTML Drag and Drop sappuie sur le modèle dévénement du DOM pour obtenir des informations sur ce qui est glissé ou déposé et pour mettre à jour cet élément par glisser-déposer. Avec les gestionnaires dévénements JavaScript, vous pouvez transformer nimporte quel élément en un élément déplaçable ou un élément dans lequel il peut être déposé.

Dans ce didacticiel, nous allons créer un exemple de glisser-déposer à laide du glisser-déposer HTML API avec JavaScript vanilla pour utiliser les gestionnaires dévénements.

Prérequis

Pour terminer ce didacticiel, vous aurez besoin de:

• Un navigateur Web moderne prenant en charge lAPI Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Étape 1 – Création du projet et du balisage initial

Notre projet consistera en un conteneur avec deux types déléments enfants:

• Les éléments enfants que vous pouvez faire glisser
• Les éléments enfants dans lesquels des éléments peuvent être déposés

Tout dabord, ouvrez la fenêtre de votre terminal et créez un nouveau répertoire de projet:

Ensuite, accédez à ce répertoire:

Ensuite, créez un fichier index.html dans ce répertoire:

Ensuite, ajoutez un code standard pour une page Web HTML:

Et entre les ajoutent votre élément draggable et votre dropzone (cible de dépôt):

Enregistrez et fermez le fichier. Ensuite, créez un fichier style.css:

Ensuite, ajoutez des styles pour les éléments de notre index.html fichier:

Cela ajoutera un peu de mise en forme à lapplication. Vous pouvez maintenant afficher index.html dans le navigateur et observer que cela produit un draggable <div> et a dropzone <div>.

Ensuite, nous rendrons explicitement le premier <div> déplaçable en ajoutant lattribut draggable:

Enregistrez et fermez le fichier.

Enfin, affichez à nouveau index.html dans le navigateur. Si nous cliquons sur draggable <div> et le faisons glisser sur lécran, il devrait y avoir une indication visuelle de son déplacement.

La valeur par défaut de lattribut draggable est auto. Cela signifie que si lélément peut être déplacé sera déterminé par le comportement par défaut de votre navigateur. En général, cela signifie que les sélections de texte, les images et les liens peuvent être déplacés sans spécifier draggable="true".

Vous disposez maintenant dun fichier HTML avec un élément déplaçable. Nous allons passer à lajout de gestionnaires onevent.

Étape 2 – Gestion des événements de glisser-déposer avec JavaScript

Actuellement, si nous relâchez la souris tout en faisant glisser lélément déplaçable, rien ne se passe. Pour déclencher une action par glisser-déposer sur des éléments DOM, nous devrons utiliser lAPI Drag and Drop:

• ondragstart: Ce gestionnaire dévénements sera attaché à notre élément draggable et se déclenchera lorsquun événement dragstart se produit.
• ondragover: Ce gestionnaire dévénements sera associé à notre élément dropzone et se déclenchera lorsquun événement dragover se produit.
• ondrop: ce gestionnaire dévénements sera également attaché à notre élément dropzone et se déclenchera lorsquun drop lévénement se produit.

Remarque: Il y a huit gestionnaires dévénements au total: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart et ondrop. Pour notre exemple, nous ne les exigerons pas tous.

Commençons par référencer un nouveau fichier https://www.digitalocean.com/community/tutorials/script.js dans notre index.html:

Ensuite, créez un nouveau https://www.digitalocean.com/community/tutorials/script.js file:

Lobjet DataTransfer gardera une trace des informations relatives au glissement en cours. Pour mettre à jour notre élément par glisser-déposer, nous devons accéder directement à lobjet DataTransfer.Pour ce faire, nous pouvons sélectionner la propriété dataTransfer à partir de lélément DOM DragEvent.

Remarque: Le DataTransfer peut techniquement suivre les informations de plusieurs éléments glissés en même temps. Pour notre exemple, nous allons nous concentrer sur le déplacement dun élément.

La méthode dataTransfer de lobjet setData peut être utilisé pour définir les informations sur létat de glissement de lélément actuellement déplacé. Il prend deux paramètres:

• une chaîne qui déclare le format du deuxième paramètre
• les données réelles en cours de transfert

Notre objectif consiste à déplacer notre élément draggable vers un nouvel élément parent. Nous devons pouvoir sélectionner notre élément draggable avec un id unique. Nous pouvons définir la id de lélément glissé avec la méthode setData pour pouvoir lutiliser plus tard.

Allons-y. revisitez notre fichier https://www.digitalocean.com/community/tutorials/script.js et créez une nouvelle fonction à utiliser setData:

Remarque: Internet Explorer 9 à 11 aurait des problèmes lors de lutilisation de "text/plain". Le format doit "text" pour ce navigateur.

Pour mettre à jour le style CSS de lélément glissé, nous pouvons accéder à ses styles en utilisant à nouveau lévénement DOM et par définir les styles que nous voulons pour currentTarget.

Ajoutons à notre fonction et changeons le backgroundColor en yellow:

Remarque: tous les styles que vous modifiez devront être à nouveau mis à jour manuellement en cas de dépôt si vous voulez des styles de glisser uniquement. Si vous changez quoi que ce soit quand il commence à faire glisser, lélément déplacé conservera ce nouveau style à moins que vous ne le modifiiez à nouveau.

Maintenant, nous avons notre fonction JavaScript pour le début du glissement.

Nous pouvons ajouter ondragstart à lélément draggable dans index.html:

Affichez index.html dans votre navigateur. Si vous essayez de faire glisser votre élément maintenant, le style déclaré dans notre fonction sera appliqué:

Cependant, rien ne se passera lorsque vous relâchez votre clic.

Le prochain gestionnaire dévénements déclenché dans cette séquence est ondragover.

Le comportement de dépôt par défaut pour certains éléments DOM comme <div> s dans les navigateurs naccepte généralement pas la suppression. Ce comportement interceptera le comportement que nous tentons dimplémenter. Pour nous assurer que nous obtenons le comportement de suppression souhaité, nous appliquerons preventDefault.

Revoyons le fichier https://www.digitalocean.com/community/tutorials/script.js et créez une nouvelle fonction à utiliser preventDefault. Ajoutez ce code à la fin du fichier:

Maintenant, nous pouvons ajouter ondragover à notre élément dropzone dans index.html:

À ce stade, nous navons toujours pas écrit de code pour gérer la suppression réelle. Le dernier gestionnaire dévénements déclenché dans cette séquence est ondrop.

Revoyons notre fichier https://www.digitalocean.com/community/tutorials/script.js et créons une nouvelle fonction .

Nous pouvons référencer les données que nous avons enregistrées précédemment avec la méthode setData de lobjet dataTransfer. Nous utiliserons la méthode getData de lobjet dataTransfer. Les données que nous avons définies étaient les id, cest donc ce qui nous sera renvoyé:

Sélectionnez notre élément draggable avec le id que nous avons récupéré:

Sélectionnez notre dropzone élément:

Ajouter notre draggable à lélément dropzone:

Réinitialisez notre objet dataTransfer:

Maintenant, nous pouvons ajouter ondrop à notre élément dropzone dans index.html:

Une fois que cest fait, nous avons une fonctionnalité de glisser-déposer terminée. Affichez index.html dans votre navigateur et faites glisser lélément draggable vers dropzone.

Notre exemple gère le scénario dun seul élément déplaçable et dune seule cible de dépôt. Vous pouvez avoir plusieurs éléments déplaçables, plusieurs cibles de dépôt et les personnaliser avec tous les autres gestionnaires dévénements de lAPI Glisser-déposer.

Étape 3 – Construire un exemple avancé avec plusieurs éléments déplaçables

Voici un autre exemple de la façon dont vous pouvez utiliser cette API: une liste de tâches avec des tâches déplaçables que vous pouvez déplacer une colonne "To-do" à une colonne "Done".

Pour créer votre propre liste de tâches, ajoutez dautres éléments déplaçables avec id s à index.html:

Afficher index.html dans votre navigateur et faites glisser les éléments de la colonne À faire vers la colonne Terminé. Vous avez créé une application de tâches et testé la fonctionnalité.

Conclusion

Dans cet article, vous avez créé une application de tâches pour explorer la fonctionnalité de glisser-déposer qui est disponible pour les navigateurs Web modernes.

LAPI Drag and Drop offre plusieurs options pour personnaliser vos actions au-delà du glisser-déposer. Par exemple, vous pouvez mettre à jour le style CSS de vos éléments glissés. De plus, au lieu de déplacer lélément, vous pouvez choisir de copier votre élément déplaçable afin quil soit répliqué lors de la dépose.

Gardez à lesprit que si de nombreux navigateurs Web prennent en charge cette technologie, vous ne pourrez peut-être pas compter dessus si votre audience est constituée dappareils qui ne prennent pas en charge cette fonctionnalité.

Pour en savoir plus sur tout ce que vous pouvez déposer avec lAPI Drag and Drop, consultez la documentation de MDN dessus.