HTML5 – Glisser-déposer
Drag and Drop (DnD) est un puissant concept d’interface utilisateur qui facilite la copie, la réorganisation et la suppression des éléments à l’aide de clics de souris. Cela permet à l’utilisateur de cliquer et de maintenir le bouton de la souris enfoncé sur un élément, de le faire glisser vers un autre emplacement et de relâcher le bouton de la souris pour y déposer l’élément.
Pour obtenir la fonctionnalité de glisser-déposer avec HTML4 traditionnel, les développeurs devraient soit utiliser une programmation JavaScript complexe ou d’autres frameworks JavaScript tels que jQuery, etc.
Maintenant, HTML 5 est venu avec une API Drag and Drop (DnD) qui apporte le support DnD natif à la création du navigateur il est beaucoup plus facile de coder.
HTML 5 DnD est pris en charge par tous les principaux navigateurs comme Chrome, Firefox 3.5 et Safari 4, etc.
Événements de glisser-déposer
Il y a un certain nombre d’événements qui sont déclenchés au cours des différentes étapes de l’opération de glisser-déposer. Ces événements sont répertoriés ci-dessous –
| Sr.No. | Événements & Description |
|---|---|
| 1 |
dragstart Se déclenche lorsque l’utilisateur commence à faire glisser l’objet. |
| 2 |
dragenter Déclenché lorsque la souris est d’abord déplacée sur l’élément cible alors qu’un glissement se produit. Un écouteur pour cet événement doit indiquer si une suppression est autorisée sur cet emplacement. S’il n’y a pas d’écouteurs ou si les écouteurs n’effectuent aucune opération, une suppression n’est pas autorisée par défaut. |
| 3 |
dragover Cet événement est déclenché lorsque la souris est déplacée sur un élément lorsqu’un glissement se produit. La plupart du temps, l’opération qui se produit pendant un auditeur sera la même que l’événement dragenter. |
| 4 |
dragleave Cet événement est déclenché lorsque la souris quitte un élément pendant qu’un glissement se produit. Les auditeurs doivent supprimer tous les marqueurs de surlignage ou d’insertion utilisés pour les commentaires de suppression. |
| 5 |
glisser Se déclenche à chaque fois que la souris est déplacée pendant que l’objet est déplacé. |
| 6 |
drop L’événement de dépôt est déclenché sur l’élément où le dépôt a eu lieu à la fin de l’opération de glissement. Un auditeur serait chargé de récupérer les données glissées et de les insérer à l’emplacement de dépôt. |
| 7 |
dragend Se déclenche lorsque l’utilisateur relâche le bouton de la souris tout en faisant glisser un objet. |
Remarque – Notez que seuls les événements de glissement sont déclenchés; les événements de souris tels que mousemove ne sont pas déclenchés pendant une opération de glissement.
L’objet DataTransfer
Les méthodes d’écoute d’événements pour tous les événements de glisser-déposer acceptent l’objet Event qui a un attribut en lecture seule appelé dataTransfer.
L’événement.dataTransfer renvoie l’objet DataTransfer associé à l’événement comme suit –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
L’objet DataTransfer contient des données sur le glissement et déposer l’opération. Ces données peuvent être récupérées et définies en termes de divers attributs associés à l’objet DataTransfer comme expliqué ci-dessous –
| Sr.No. | Attributs DataTransfer et leur description |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Renvoie une DOMStringList listant les formats définis dans l’événement dragstart. De plus, si des fichiers sont déplacés, l’un des types sera la chaîne « Files ». |
| 4 |
dataTransfer.clearData () Supprime les données des formats spécifiés. Supprime toutes les données si l’argument est omis. |
| 5 |
dataTransfer.setData (format, données) Ajoute les données spécifiées. |
| 6 |
data = dataTransfer.getData (format) Renvoie les données spécifiées. S’il n’y a pas de telles données, renvoie la chaîne vide. |
| 7 |
dataTransfer.files Renvoie une FileList des fichiers glissés, le cas échéant. |
| 8 |
dataTransfer.setDragImage (element, x, y) Utilise l’élément donné pour mettre à jour les commentaires de glissement, en remplaçant tous les commentaires précédemment spécifiés. |
| 9 |
dataTransfer.addElement (élément) Ajoute l’élément donné au liste des éléments utilisés pour rendre les commentaires de glissement. |
Processus de glisser-déposer
Voici les étapes à suivre pour implémenter l’opération de glisser-déposer –
Étape 1 – Rendre un objet déplaçable
Voici les étapes à suivre –
-
Si vous voulez faire glisser un élément, vous devez définir l’attribut draggable sur true pour cet élément.
-
Définissez un écouteur d’événement pour dragstart qui s
-
Le dragstart de l’écouteur d’événements définira les effets autorisés (copie, déplacement, lien ou une combinaison).
Voici l’exemple pour rendre un objet déplaçable –
Cela produira le résultat suivant –
Étape 2 – Déposer l’objet
Pour accepter un dépôt, la cible de dépôt doit écouter au moins trois événements.
-
L’événement dragenter, qui est utilisé pour déterminer si la cible de dépôt doit accepter ou non le dépôt . Si le dépôt doit être accepté, cet événement doit être annulé.
-
L’événement de glisser-déposer, qui est utilisé pour déterminer les commentaires à montrer à l’utilisateur. Si l’événement est annulé, alors le retour (généralement le curseur) est mis à jour en fonction de la valeur de l’attribut dropEffect.
-
Enfin, l’événement drop, qui permet la suppression réelle à effectuer.
Voici l’exemple pour déposer un objet dans un autre objet –
Cela produira le résultat suivant –