HTML5-comment-utiliser-l-API-native-Drag&Drop-partie1

Comment utiliser l’API glisser-déposer en HTML5 – 1

Voici une nouvelle série d’articles concernant le glisser-déposer, le fameux drag and drop, et surtout à l’API native en HTML5 qui lui est consacré.

Tout le monde aime les interfaces utilisateur faciles à utiliser et interactives. L’avènement des smartphones a eu pour effet de faire bondir en avant les attentes des utilisateurs. Ceux-ci s’attendent désormais que votre site soit intuitif, utilise des actions universellement comprises, et qu’interagir avec lui soit par dessus tout facile. Donner à vos utilisateurs la possibilité de glisser-déposer (ou drag and drop en anglais), et de trier les objets, rend votre site plus intuitif car les gens comprennent sans difficulté cette façon de procéder.

Gérer le glisser-déposer et le tri était jusqu’ici une tâche dévolue à JavaScript, et les développeurs avaient auparavant la possibilité de construire leurs propres interactions ou d’utiliser une solution pré-configurée. Avec l’apparition de l’API Drag and Drop HTML5, les développeurs sont  dorénavant en mesure d’accrocher les événements et attributs natifs pour gérer ces interactions.

Dans ce premier article, nous allons nous intéresser aux événements fournis par l’API glisser-déposer native.

Une brève introduction de l’API Drag and Drop ou glisser-déposer

Faisons donc un petit tour d’horizon de l’API afin d’avoir un aperçu de comment tout cela fonctionne.

L’API native nous permet de définir les éléments qui sont déplaçables en utilisant l’attribut draggable= »true » sur les éléments souhaités. Certains éléments sont déplaçables par défaut, sans aucune modification (tels que les images ou le texte).

HTML5 API Drag and Drop - Glisser déposer un texte HTML5 API Drag and Drop - Glisser déposer une image

Par défaut, lorsque les éléments déplaçables sont déplacés, seuls les éléments de formulaire form tels que input seront en mesure de les accepter comme un dépôt. Vous avez surement déjà vu cela auparavant : si vous sélectionnez du texte et le faites glisser dans un élément textarea, le texte est effectivement copié dans cet élément textarea.

HTML5 API Drag and Drop - Glisser déposer un text dans un input

L’API native gère également les glisser à partir de zones extérieures de votre système d’exploitation vers la zone de dépôt. Presque tous les bons systèmes de gestion de contenu (CMS) fournissent la fonctionnalité d’ajout de contenu par drag and drop. Étant donné que ces éléments sont externes, tout ce que vous devez configurer est la zone de largage (et aussi avoir un navigateur compatible).

HTML5 API Drag and Drop - Glisser déposer une image dans un textarea

 

Petite remarque sur les appareils mobiles

Actuellement, l’API native ne supporte pas encore les appareils mobiles. Bien que cela changera à l’avenir, il est donc préférable de suivre les exemples suivants sur un navigateur de bureau.

Evénements de l’API glisser-déposer

L’API native fournit les événements suivants, qu’il est possible d’écouter. Ces événements s’appliquent soit à l’élément déplaçable soit à la zone de largage et sont déclenchés à des moments précis.

Lorsque ces événements sont déclenchés, nous avons accès à un objet local (que nous appellerons event). Cet objet contient plus d’informations sur l’événement lui-même et vous donnera accès à l’objet dataTransfer où vous pourrez régler la plupart des méthodes et propriétés.

Nous aurons aussi besoin de brancher une fonction de rappel, ou callback, sur chacun des événements afin d’interagir avec l’API.

Activités liées au drag – glisser

Ces événements ne sont déclenchés que sur les items déplaçables.

dragstart

Evènement déclenché dès que nous commençons le glisser. C’est ici que nous allons dire à l’API de ce que nous allons glisser et mettre en place d’autres valeurs. Utilisez la méthode setData( ) pour définir les données que vous souhaitez enregistrer, définissez la propriété effectAllowed pour l’élément déplaçable, et de définir l’aide déplaçable avec setDragImage( ).

drag

Cet événement est déclenché continuellement lors du glisser. Le nombre de fois où il se produit dépend du navigateur. Ceci est utile pour déterminer exactement où l’élément déplaçable se trouve.

dragend

Cet événement se déclenche dès que l’élément déplacé est largué (indépendamment de l’endroit du dépôt) et généralement déclenché immédiatement après l’événement de largage de la zone de dépôt. Vous pouvez utiliser cet événement pour réinitialiser les styles appliqués lors du déplacement ou bien pour effectuer d’autres actions de nettoyage. L’événement dragend a accès à l’élément déplaçable de sorte qu’il est possible de faire des calculs après la fin du déplacement (comme, par exemple, vérifier si l’événement drop a réussi en recherchant des éléments nouvellement ajoutés, pour  pouvoir supprimer l’élément déplacé original).

Activités liées au drop – déposer

Ces événements ne se déclenchent que sur les éléments que vous indiquez comme cibles de largage (ou qui sont déjà naturellement cibles, comme des éléments de formulaire).

dragenter

Déclenché une seule fois dès qu’un élément déplaçable entre dans une zone de largage. Il se déclenche lorsque plus de 50% de l’élément est à l’intérieur de la zone de largage.

Cet événement initie le dropEffect de la zone de largage. Par défaut, le drop sur des éléments « non-formulaire » ne fait rien. Il est nécessaire d’appeler manuellement event.preventDefault( ) et event.stopPropagation( ) pour dire à l’API que le dépôt doit avoir lieu.

Vous pouvez comparer la valeur effectAllowed de l’objet dataTransfer fixée par l’élément déplacé et la valeur dropEffect de la zone de dépôt. Si ces valeurs ne vont pas ensemble (par exemple, l’une est copy tandis que l’autre est link), alors le navigateur ne déposera pas l’élément avec succès (même si vous avez prévenu les erreurs et arrêté la propagation).

Vous pouvez utiliser la propriété types pour obtenir une liste de tous les types de données qui ont été fixés pour l’événement dragstart. Vous ne pouvez pas voir les données, mais vous pouvez voir leurs types. Ici, il est possible d’utiliser une autre méthode appelée contains pour voir si un certain type de données a été mis en place. Cela se fait via la méthode event.dataTransfer.types.contains(type). Cela peut, par exemple, être utilisé pour veiller à ce que quelque chose soit bien défini pour le type text/html.

Vous pouvez définir des classes ou déclencher des actions maintenant que vous savez que votre élément déplaçable est entré dans la zone de largage (en général,  la zone de largage est stylée différemment pour montrer qu’elle est activée).

dragover

Cet événement est essentiellement le même que dragenter sauf qu’il est sans cesse appelé tant que l’élément déplaçable se trouve à l’intérieur de la zone de largage. Cet événement est parfait si vous voulez déterminer la position exacte de l’élément déplaçable, puisqu’il est continuellement mis à jour.

Cet événement initie le dropEffect de la zone de largage et, tout comme pour dragenter, vous devrez prévenir les défaillances et la propagation.

dragleave

L’événement dragleave se déclenche une fois que l’élément déplaçable est éloigné d’une zone de dépôt. Il est généralement utilisé pour supprimer les styles ajoutés dans dragenter ou dragover et éliminé une fois que l’élément déplaçable ne chevauche plus la zone de largage.

drop

Cet événement drop est déclenché une fois que l’élément déplaçable est libéré et que la zone de largage est d’accord pour accepter le dépôt. Cela ne fera que tirer si les valeurs dropEffect et effectAllowed de l’élément déplaçable et de la zone de dépôt sont correctes. Sur drop, il faudra collecter les informations en utilisant la méthode getData( ).

 

Voilà, nous avons fait le tour des événements disponibles dans l’API native glisser-déposer de HTML5. L’article suivant sera, quant à lui,  consacré aux méthodes et aux propriétés de l’API !

Laisser un commentaire

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