Table des matières
Déjà dans la première partie de ce tutoriel, nous avons vu comment démarrer le événement glisser de faire glisser les éléments, c'est-à-dire que nous avons fait une partie du travail, nous avons vu comment interagir avec les différents événements de cette première section.Maintenant il faut savoir activer la zone où déposer l'élément, c'est déjà l'action complémentaire qui va nous permettre d'atteindre des fonctionnalités complètes sur notre page.
Création de la zone de dépôt
C'est la zone où nous allons laisser les éléments que nous faisons glisser, afin de manipuler cette zone nous allons avoir plusieurs événements, afin de mieux comprendre comment gérer ces événements nous allons lister chacun et expliquer comment cela fonctionne .
Événements (modifier)
- Entraîneur : Il est activé lorsqu'un élément glissé pénètre dans l'espace de l'écran que nous avons défini pour la zone de dépôt.
- Trainer: Il se déclenche lorsque l'élément déplacé se déplace dans la zone de dépôt que nous avons déjà définie.
- Faites glisser : Il est activé au moment où un élément traîné quitte la zone de dépôt.
- Tomber: C'est l'événement qui est activé lorsqu'un objet est laissé dans la zone de dépôt.
Une fois que nous savons de quels événements nous disposons, nous allons construire un code simple, dans lequel lors du dépôt ou du dépôt d'un élément que nous avons glissé, il s'affiche dans la zone de dépôt.
Pour cela, nous allons utiliser certaines fonctions du HTML interne où nous allons cloner l'élément qui est jeté dans la zone.
Voyons l'exemple de code :
Exemple
Déposer ici
Si nous regardons de près, nous définissons l'élément cible comme l'élément qui contiendra la zone de dépôt, une fois cela fait, nous définissons ce qui se passera dans chacun des événements, si nous regardons le événement de dépôt est l'endroit où se produit l'étape finale, ici nous allons cloner l'élément traîné et grâce à la HTML interne nous allons l'afficher de manière asynchrone lorsque nous déposerons l'élément que nous avons déplacé.
Une autre chose à laquelle nous devons faire attention est d'écraser l'événement par défaut du navigateur, nous gérons cela lors de la création de la fonction poignéeFaire glisserDe cette façon, nous empêchons le navigateur d'interpréter les instructions d'une manière qui n'est pas attendue par nous.
Dans notre navigateur, cela devrait ressembler à ceci :
