Drag and Drop

Firefox et les autres applications Mozilla proposent de nombreuses fonctionnalité pour capturer les glisser-déposer. Cela permet aux utilisateurs de cliquer et maintenir le bouton de la souris enfoncée sur un élément, le déplacer vers un autre endroit et lâcher le bouton de la suris pour l'y déposer. Une représentation transparente de ce qui est déplacé suivra alors le pointeur de la souris pendant ce déplacement. La destination de ce glisser-déposer peut être une autre application. Les sites Internet, les extensions et les applications XUL peuvent utiliser cette fonctionnalité pour personnaliser les éléments qui peuvent être glissé-déposés, le comportement de l'opération de glisser-déposer ainsi que les endroits où ces objets peuvent être déposés.

Cette section couvre les aspects du glisser-déposer dans Firefox 3.5 (Gecko 1.9.1) et plus. Pour les API plus ancienne Firefox 3.0 et plus ancien, reportez-vous à l'ancienne documentation.

Les bases du glisser-déposer

 

Quand un glisser-déposer commence, plusieurs informations peuvent être récupérées :

  • les données à glisser-déposer, qui peuvent être des nombres ou d'autres formats. Par exemple, des données textes contenant un chaîne de caractères. Pour plus d'informations sur ces données, reportez vous aux Drag Data.
  • la représentation de l'objet déplacé qui apparaît sous le curseur de la souris lors du glisser-déposer. Cette image peut être personnalisée, bien que, la plupart du temps, vous préfèrerez ne pas en spécifier laissant apparaître l'image générée par défaut sur la base de l'élément sur lequel la souris a été maintenue pressée. pour en savoir plus sur la représentation du glisser-déposer, lisez Setting the Drag Feedback Image
  • les actions authorisées pour le glisser-déposer. Trois effets différents sont possibles : copy pour indiquer que les données qui ont été glissée-déposée seront copiée depuis leur source vers l'endroit où elles ont été déposées, move pour indiquer que ces dernières seront déplacée vers la destination choisie, et link pour indiquer qu'un lien relationnel ou une connection seront créé entre la source et la destination du glisser-déposer. Durant l'opération de glisser-dépose, les effets peuvent être modifiés pour indiquer que seuls certains types d'effets sont autorisés sur certaines destinations. S'il sont autorisées, un dépot est alors possible sur cette destination. Reportez-vous aux Drag Effects pour plus de détails.

Mozilla et Firefox autorisent certaines fonctionnalités qui ne sont pas spécifiées par le standard du glisser déposer comme le glisser-déposer multiple et le support de données non-textuelles. Pour plus d'information, lire Dragging and Dropping Multiple Items

Pour obtenir la liste des différentes données susceptibles d'être glissées-déposées, lire Recommended Drag Types

Une rapide référence des meilleurs pratiques pour le glisser déposé est diponible pour les types suivants :

Lire DataTransfer pour plus d'informations sur l'objet DataTransfer.

Evènements lors du dépôt (drop)

Plusieurs évènements sont déclenchés à différents moments de l'opération de glisser-déposer. Notez que seuls les évènements spécifiques au glisser-déposer sont déclenchés, des évènements comme mousemove ne sont pas disponibles lors d'une opération de glisser-déposer.

La propriété dataTransfer de tout évènement de glisser-déposer contient les données relative à cette opération.

dragstart
Déclenché sur un élément lorsque qu'un glisser-déposer est entrepris. L'utilisateur requiert la possibilité de glisser-déposer l'élément sur lequel cet évènement est déclenché. Pendant cet évènement, un écouteur pourrai fixer les données pour lesquelles le glisser-déposer interviendra. Pour plus d'informations, lire Starting a Drag Operation.
dragenter
Déclenché lorsque le pointeur de la souris est déplacée pour la première fois au dessus d'un élément pendant le glisser-déposer. Un écouteur d'évènement pourrait alors indiquer si le dépôt des données courantes est autorisée ou non sur cette zone. Si aucun écouteur n'a été défini, ou si ce dernier n'entraîne aucune action, alors, le dépôt n'est par défaut, pas autorisé. C'est également l'évènement à prendre en charge pour donner des retours à l'utilisateur quand à la possibilité qu'il a déposer le contenu du glisser-déposer en affichant une surbrillance ou un marqueur d'insertion. Pour plus d'information, lire Specifying Drop Targets.
dragover
Cet évènement est déclenché lorsque la souris est déplacée au dessus d'un élément durant un glisser-déposer. La plupart du temps, cet évènement est utilisé pour les mêmes buts que l'évènement dragenter. Plus d'informations sur Specifying Drop Targets.
dragleave
Cet évènement est déclenché quand la souris quite un élément durant un glisser-déposer. Les écouteurs évènement devraient retirer toute surbrillance ou marqueur d'insertion de cette zone.
drag
Cet évènement est déclenché à la source du glisser-déposer, l'élément sur lequel l'évènement dragstart fût déclenché.
drop
L'évènement drop est déclenché sur l'élément sur lequel le dépôt a été effectué à la fin de l'opération de glisser déposer. Un écouteur d'évènement devrait être responsable de la récupération des données soruces du glisser-déposer et de leur insertion sur la zone de dépôt. Cet évènement ne sera déclenché que si le dépôt est désiré. Il ne sera pas déclenché si l'utilisateur annule ce dernier en pressant, par exemple, sur la touche "Echap" de son clavier ou si le bouton de la souris fût relaché alors que le curseur était au dessus d'une zone pour laquelle le glisser-déposer n'était pas autorisé. Pour plus d'information, lire Performing a Drop.
dragend
La source du glisser-déposer recevra un évènement de ce type lorsque l'opération de glisser-déposer est terminée, qu'elle se soit bien déroulée ou non. Lire, Finishing a Drag pour plus d'information.

 

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : Nfroidure
Dernière mise à jour par : Nfroidure,