Astuce #8: Drag and Drop avec HTML5 et Javascript

Bonjour à tous et bienvenue dans cette nouvelle vidéo où nous allons découvrir une nouvelle astuce. Cette fois, nous allons voir comment mettre en place un système de drag and drop à l'aide du JavaScript. Drag and drop ou glisser-déposer est une méthode qui permet de déplacer les éléments graphiques d'un endroit à un autre à l'aide de la souris ou directement sur l'écran si celui-ci est tactile comme c'est le cas pour les smartphones et tablettes ou même certains PC. Ce système n'est pas propre qu'aux applications Web, mais il a déjà été intégré sur les systèmes d'exploitation depuis bien longtemps. Par exemple, il vous suffit de glisser un dossier ou fichier dans la corbeille située sur votre bureau pour que celui-ci soit supprimé, ou encore déplacer un fichier texte dans la fenêtre d'un éditeur ouvert pour que son contenu soit affiché. Dans une page Web, le système de Drag and Drop offre une interactivité évoluée avec l'utilisateur, surtout si celui-ci s'y rend depuis un appareil mobile. C'est la raison pour laquelle on trouve de plus en plus de sites et applications web qui le mettent en œuvre sur certaines de leurs pages comme c'est le cas pour Gmail où vous pouvez glisser un fichier depuis votre ordinateur afin de le joindre à un email. Ce système de glisser-déposer est rendu célèbre au sein des pages web grâce à HTML5. En effet, bien avant la standardisation de ce dernier, drag and drop pouvait être réalisé avec du JavaScript uniquement, mais cela demandait d'écrire beaucoup de code pour y parvenir. Avec HTML5, c'est devenu une tâche facile. Imaginons qu'on dispose de 4 images que l'on veut glisser d'une zone à une autre. Initialement, les images sont déposées statiquement dans un container avec du HTML et on va les déplacer avec le drag and drop dans le deuxième container. La première opération à faire, c'est rendre ces objets draggables, ça veut dire déplaçables. On va donc ajouter l'attribut HTML draggable comme ceci. Avec la valeur booléenne true. On va faire la même chose pour toutes les images. Désormais, on a indiqué au navigateur que ces éléments peuvent être déplacés. Ensuite, nous allons prévoir les événements qui permettent d'assurer le drag and drop comme ceci. Sur le premier container, ça veut dire celui qui contient initialement les images, on mettra l'événement onDragStart. On auquel on va associer la fonction start. OnDragStart est un élément qu'on doit mettre sur la zone qui contient initialement les objets à déplacer. Sur le deuxième container, on va intégrer les 2 événements suivants: OnDragOver, à laquelle on va associer la fonction over. De préférence, on mettra return parce que cette fonction est censée nous retourner quelque chose. Et aussi l'événement onDrop auquel on va associer la fonction drop qui est aussi censée nous retourner quelque chose. On mettra donc Liter. L'événement onDragOver indique au navigateur la zone de largage ou bien la zone où l'on va déposer les éléments que l'on a glissés. Et onDrop va finaliser l'opération de drag and drop, c'est-à-dire affecter définitivement l'élément à déplacer au nouveau parent. Maintenant nous allons écrire notre JavaScript et on commence par la fonction start. Normalement on aura besoin de passer l'objet event qui transporte beaucoup d'informations qui concernent les objets qui ont déclenché les événements. Alors on va le mettre ici et aussi sur drop. Pour hover, c'est optionnel, on peut le mettre si vous voulez, bien qu'on n'en aura pas vraiment besoin. Les opérations de drag and drop s'articulent autour de la propriété data-transfer. C'est une propriété qui est intégrée au JavaScript et qui permet de transporter les informations qui concernent l'objet à déplacer. Et c'est une propriété de l'objet event. On va donc récupérer l'objet event sous le nom de e. Ensuite, on mettra l'objet event La première propriété que l'on va déclarer, c'est effectAllowed. Cette propriété permet d'indiquer l'effet que l'on veut visualiser au sein du navigateur si on déplace l'élément. Généralement, on préfère l'effet move, c'est-à-dire que c'est un effet de déplacement. Dans ce cas, une fois l'objet sera déplacé, il quittera aussitôt son premier parent et il va rejoindre son nouveau parent. Ensuite, on doit mémoriser l'élément que l'on veut déplacer, toujours grâce à dataTransfer comme ceci. Maintenant, on va appeler la méthode setData. Cette méthode accepte 2 arguments. Le premier argument, c'est le type de la donnée à sauvegarder, on va dire c'est un type text. Et le deuxième argument, c'est l'objet que l'on veut déplacer. Dans ce cas, les objets que l'on veut déplacer sont les images, ils sont identifiés par un ID. Donc on va récupérer la valeur de chacun de ces IDs. On mettra donc objet event.target.getAttribute l'attribut ID. event.target retourne l'objet qui a déclenché l'événement. Dans ce cas-ci, cet objet, on va récupérer son ID que l'on va mémoriser grâce à setData. Donc nous avons fini avec la fonction start. Maintenant, on va déclarer la fonction over. On peut récupérer le event bien que c'est optionnel dans ce cas. Tout ce que cette fonction va faire c'est return false. Donc elle aura retourné la valeur false que l'on va récupérer ici. En réalité le navigateur empêche le déplacement des éléments d'une zone à une autre. Ça c'est le comportement par défaut et pour empêcher ce comportement on a mis return false. On peut le faire autrement grâce toujours à l'objet event. De cette manière avec la méthode preventDefault comme ceci. Donc vous avez le choix entre utiliser return false ou bien preventDefault, ça devrait donner le même résultat. Alors dans un premier temps, on va conserver juste return false. Du coup, on n'a pas vraiment besoin de l'objet event qu'on a passé en guise d'argument, mais on va quand même le garder. La prochaine fonction maintenant, c'est la fonction drop que l'on va déclarer. Et le seed va accueillir l'objet event. Drop signifie le largage, ça veut dire que l'on va déposer l'élément définitivement dans son nouveau parent. Alors on doit d'abord récupérer l'objet que l'on a déplacé, on va l'appeler obj grâce toujours à DataTransfer mais maintenant à travers la méthode getData comme ceci. Il suffit de spécifier le type attendu qui est dans ce cas Text. Alors setData permet de mémoriser l'objet, dans ce cas l'ID de l'objet que l'on veut déplacer, et getData permet de restituer cet objet-là, toujours son ID. Alors il suffit maintenant d'ajouter le nouvel objet à son nouveau parent comme ceci. event.currentTarget pour dire l'objet qui a déclenché l'événement, qui dans ce cas est la deuxième div ou bien le deuxième parent. On appelle la méthode appendChild qui permet d'ajouter un élément HTML. Et l'élément à ajouter n'est rien d'autre que celui qui est identifié par ob. Alors on mettra document.getElementById. Exécutons pour voir le résultat. Donc on constate bien que le drag and drop fonctionne, c'est-à-dire que les objets changent de parents dynamiquement. Cependant, il est préférable de stopper la propagation de l'événement de cette manière. Nous avons déjà eu l'occasion de découvrir ces méthodes. Donc stopPropagation, ça permet tout simplement de briser le flux de propagation de l'événement. Autrement dit, une fois l'objet a été affecté à ce nouveau parent, on arrête la propagation parce que généralement ça peut mener le navigateur à exécuter des choses que l'on n'a pas prévu. Alors autant arrêter la propagation des événements. Et là encore, on peut mettre return false. Pour empêcher tout comportement par défaut. D'ailleurs, vous avez remarqué qu'au moment du déclenchement de l'événement onDrop, on a mis return drop. Ça veut dire on va retourner quelque chose qui est dans ce cas le false. En fait, ce qui arrive, c'est qu'une fois que vous relâchez l'élément déplacé, le navigateur a tendance à l'ouvrir dans une nouvelle fenêtre en guise de lien. Et pour empêcher ce comportement par défaut, on met return false ou encore preventDefault, toujours à travers l'objet event si vous voulez. Réexécutons. Donc rien n'a changé, mais maintenant le code est devenu beaucoup plus sûr. On va juste ajouter un effet. Par exemple, si je déplace cette image, une fois j'atteins la zone de largage, il faut bien que celle-ci change un petit peu d'allure pour prévenir l'utilisateur que c'est la zone qui est censée accueillir de nouveaux éléments. Donc nous on va agir sur la bordure, on va changer sa couleur par exemple. On va mettre ceci sur la fonction hover, on mettra e.currentTarget pour désigner l'objet qui a déclenché l'événement qui dans ce cas est le nouveau parent et on va lui appliquer un nouveau style CSS à travers une classe que j'avais déjà prévue et qui s'appelle class2. Regardons ce qui va se passer. Donc la bordure change de couleur, mais quand je relâche, on constate que la bordure reste ainsi. Alors il faut bien qu'elle retrouve sa couleur d'origine. Donc on va faire la même chose, mais maintenant sur la fonction drop, c'est-à-dire une fois l'opération de drag and drop aura fini, on restituera la couleur d'origine de la bordure à travers la classe 1 dans ce cas. Réexécutons. Et voilà, vous constatez bien que ça marche comme prévu. Cependant, imaginez que j'ai fait ceci. Par exemple, j'ai décidé de déplacer la première image, mais après j'ai changé d'avis. Alors vous avez constaté que le nouveau parent maintient la surbrillance. Alors il faut faire disparaître ceci. Et pour ce faire, on va faire appel à un nouvel événement qui est dans ce cas OnDragLeave. Qu'on va déclarer toujours sur la deuxième div. On mettra par exemple ici. Et on va lui associer la fonction qui s'appelle leave qui va aussi envoyer un objet event. On va la déclarer là. Et là il suffit d'appliquer la couleur d'origine à la bordure comme ceci. À travers la classe 1. Réexécutons. Dans ce cas, ça marche. Et si je décide d'interrompre l'action, on constate bien que la deuxième div a restitué sa couleur d'origine. Bien sûr, le drag and drop dans ce cas se fait uniquement dans un seul sens, c'est-à-dire de la div 1 vers la div 2. Alors que dans le sens inverse, ça ne se fait pas. Et c'est normal parce que je n'ai pas encore prévu les événements qui vont assurer ceci. Et pour ce faire, c'est très simple, il suffit de mettre onDragStart encore une fois maintenant sur la deuxième div. Et les autres événements, à savoir onDragOver, onDrop et onDragLeave, on va les déclarer sur la première div. C'est-à-dire que maintenant c'est réciproque, on peut faire du drag and drop dans les deux sens. Voilà, comme ça. Ou bien dans l'autre sens et ça marche toujours de la même manière. Notez qu'il existe plein d'autres événements, méthodes et propriétés que l'on peut invoquer pour mieux perfectionner notre système de Drag and Drop que je vous invite à découvrir via le lien que je mettrai en description. J'espère que vous avez compris comment ce système fonctionne et on aura l'occasion de s'en servir dans un cas pratique, en l'occurrence pour supprimer les enregistrements d'une base de données en les glissant vers la corbeille que l'on aura intégrée à notre page web. On aura bien entendu besoin d'utiliser AJAX ou l'API Fetch pour y parvenir. Merci pour votre attention et à la vidéo prochaine.