HTML5 comment utiliser l API native Drag and Drop partie 2

Comment utiliser l’API Drag and Drop HTML5 – 2

Second article de la série sur l’API Drag and Drop d’HTML5. Dans le premier article, nous avons vu les événements. Aujourd’hui, nous nous attardons sur les principales méthodes et propriétés.

Les méthodes de l’API Drag and Drop

dataTransfer est le principal objet avec lequel interagir lorsqu’on joue avec l’API native drag and drop. Il nous est offert dans le cadre de la fonction de rappel des événements et propose plusieurs fonctions.

setData

Cette méthode définit les données qui seront collectées à partir de l’élément déplaçable en appelant la méthode event.datatransfer.setData (type, data). Il est nécessaire de passer le type de données sauvegardées ainsi que les données elles-mêmes. Ceci doit être défini dans l’événement dragstart, sans quoi cela échouera. Ses valeurs ne pourront être collectées que plus tard, au cours de l’événement drop.

L’argument type doit être un type de données applicable, tels que text/html ou text/uri-list si vous utilisez Chrome, Safari ou Firefox. Si vous utilisez Internet Explorer, ce serait Text ou URL (exactement de cette façon ou cela provoquera une erreur).

L’argument data correspond aux données que vous souhaitez enregistrer. Vous pouvez enregistrer une URL, du HTML, ou tout autre élément de données. On ne définit qu’un seul bloc de données par type. Par exemple, si vous définissez text/html pour du HTML, vous ne pourrez alors plus appeler à nouveau la méthode setData( ) avec de nouvelles informations, sans quoi l’ancien contenu sera remplacé.

getData

Voici le contrepoint de la méthode setData( ) pour collecter les données définies par l’élément déplacé au cours de l’événement startDrag. Les données sont collectées en appelant event.dataTransfer.getData (type), en précisant le type de données à collecter.

Vous aurez très probablement à vérifier les types en utilisant event.dataTransfer.types pour voir quels formats ont été adoptés. Si vous tentez d’accéder à des types non fixés de données, Internet Explorer renverra une erreur.

Cette méthode ne peut être utilisée que pour l’événement drop, car ce n’est qu’à ce moment-là que l’API expose les valeurs et donc qu’elles sont récupérables (dans un souci de protection des données lors de la transmission).

clearData

Cette méthode fait exactement ce que son nom indique, elle efface tout ensemble de données en utilisant setData et est écrit dans le format  event.dataTransfer.clearData(type). Il est nécessaire de spécifier le type de données à effacer (par exemple text/html ou URL). Cette méthode ne peut pas être utilisée avec l’événement dragstart.

setDragImage

Cette méthode définit l’image de déplacement à afficher lorsque le déplacement commence, en utilisant le format event.dataTransfer.setDragImage( ). Par défaut, lors du glissement, l’utilisateur verra une image semi-transparente de ce qu’il déplace. En utilisant cette méthode, vous pouvez définir votre propre image ou élément à afficher au cours du glissement. Cela fonctionne dans tous les navigateurs sauf Internet Explorer (et il n’y a pas actuellement de travaux prévus pour inclure cette fonctionnalité).

Propriétés de l’API Drag and Drop

Il y a plusieurs propriétés que nous pouvons définir pour l’objet dataTransfer. Nous utilisons notre variable d’événement provenant du callback pour définir ces propriétés.

effectAllowed

Cette propriété est spécifiée sur l’élément déplaçable. Elle renseigne l’API sur l’événement de glissement et quelle icône sera utilisé pour le curseur (ceci dépendant de l’OS et du navigateur). Elle est appelée en attribuant une valeur à event.dataTransfer.effectAllowed de l’événement dragstart et prend les valeurs possibles de copy, move, link, copyLink, copyMove, linkMove, all, none, ou uninitialized.

Si cette valeur ne correspond pas à celle de dropEffect, elle permet d’éviter que l’événement de dépôt ne soit appelé (et assure donc que seuls les dépôts appropriés se produisent).

dropEffect

Cette propriété est spécifiée sur la zone de largage et détermine quels éléments de glissement sont autorisés à déposer sur cette zone. Il faut attribuer une valeur via event.dataTransfer.dropEffect au cours des événements dragenter ou dragover. dropEffect prend les valeurs possibles de copy, link, move, ou none.

Si cette valeur ne correspond pas à celle de effectAllowed, elle permet d’éviter que l’événement de dépôt ne soit appelé (et assure donc que seuls les dépôts appropriés se produisent).

files

Cette propriété contient une liste de tous les fichiers locaux qui ont été définis. Elle est appelée à l’aide d’event.dataTransfer.files. Seuls les fichiers appelés sont déplacés de l’OS vers le site (par exemple des images à partir du bureau vers le conteneur de chargement du site). Cette propriété sera toujours vide si un item classique de site est déplacé (par exemple, si vous faites glisser une image, il n’y aura pas de donnée définie dans file).

C’est ici que l’on peut vérifier si nous avons des fichiers. Si c’est le cas, il est possible de lire et de traiter le contenu des fichiers à l’aide de l’objet fileReader.

types

Cet établissement fournit une liste de tous les types de données qui ont été définis dans le déplacement en cours. Appelé en utilisant la méthode event.dataTransfer.types. Ceci est utile lors des événements dragenter et dragover afin de voir quels types de données ont été créés.

effectAllowed et dropEffect en action

Si vous voulez voir comment utiliser ces propriétés de manière pratique, jetez un œil à cette petite démo sur CodePen :

Voir la démo Drag & Drop : propriétés effectAllowed et dropEffect.

Ici sont définis différents éléments déplaçables et là où ils peuvent être déposés. Plusieurs zones de largage et les types d’éléments acceptés sont aussi définies. Définir correctement ces propriétés fait en sorte que le navigateur sait quels éléments déplaçables sont autorisés à être déposés.

Même si Internet Explorer supporte les propriétés effectAllowed et dropeffect, il n’implémente pas toute la capacité native permettant seulement le glissement vers les zones de dépôt. Chrome, Safari, et Firefox restreignent les glissements et évitent les largages incorrects, en refusant de déclencher un mauvais événement drop. Sur IE, vous aurez besoin de rejeter manuellement ces dépôts en comparant les valeurs car l’événement drop sera toujours déclenché.

Et la suite ?

Le prochain article de la série sur l’API Drag and Drop d’HTML5 nous permettra de mettre tout ça en pratique au travers d’un exemple.

En attendant, voici quelques ressources additionnelles sur le sujet :

 

1 réflexion sur “Comment utiliser l’API Drag and Drop HTML5 – 2”

  1. C’est intéressant, mais serrait-t-il possible, que vous puissiez nous donner des exemples concrets. Avez-vous des exemples de code? Cela pourrait certainement aider les lecteurs.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *