Table des matières
L'effet glisser-déposer Il consiste à prendre un élément de la page d'un geste de souris, généralement en cliquant dessus et en faisant glisser ledit élément vers une zone où il peut être déposé, puis selon la fonctionnalité de notre page, un nouvel événement se produira ou non.Autrefois, cela se faisait en utilisant Bibliothèques et frameworks Javascript de style jQuery, car le support HTML était limité, mais avec HTML5, nous avons déjà ces fonctionnalités incluses dans notre navigateur.
Création des éléments pour glisser
Dans le document HTML, nous devons définir les éléments qui pourront utiliser cet effet, pour cela nous avons quelques propriétés qui nous aideront à cet effet.
Lors du placement de l'attribut déplaçable à un élément, nous indiquons au navigateur que cet élément peut ou non être glissé, pour cela l'attribut a les valeurs true, false et auto, comme nous pouvons en déduire, true indique au navigateur que s'il doit s'agir d'un élément qui est glissé, false dans le cas contraire, il désactive l'effet et auto dit au navigateur de prendre la décision d'activer ou non l'effet lui-même.
Une bonne pratique consiste à utiliser true ou false pour indiquer explicitement si l'effet est activé ou non, car bien que la plupart des navigateurs interprètent la valeur auto comme true, nous ne devons pas laisser le cours de notre page à des tiers.
Événements d'effet de traînée
Avant de passer à l'exemple, nous allons définir une autre caractéristique importante du glisser d'un élément, c'est que lors du démarrage du glisser d'un élément, nous avons 3 événements que nous pouvons identifier et avec lesquels nous pouvons effectuer divers traitements si nous voulons , ces événements sont :
départ à la traîne, est le début de l'événement glisser se produit lorsque vous placez la souris sur l'élément, cliquez et commencez à faire glisser ledit élément.
glisser, cela se produit après dragstart et dure tout le chemin que nous faisons glisser l'élément.
traîner, se produit au moment où nous arrêtons de faire glisser l'élément, que nous le laissions dans la zone de dépôt ou que nous nous soyons repentis et que nous arrêtions de le faire glisser à mi-chemin.
Implémentation de la traînée
Voyons ci-dessous un exemple de la façon dont nous incorporons tout ce qui précède dans une page, nous allons créer une liste d'éléments auxquels nous allons attribuer le attribut déplaçable comme vrai, nous allons créer des classes css qui nous permettront de modifier leurs styles et enfin avec les événements mentionnés lorsque nous faisons le glisser d'un élément cela changera sa couleur.
Voyons le code :
Exemple
Déposez ici
Maintenant, à quoi cela ressemble dans notre navigateur :
