8.5 Glisser-Déposer

Cette section indique comment implémenter des objets capables d'être déplacés, et lâchés sur d'autres objets.

L'interface

De nombreuses interfaces graphiques permettent de glisser-déposer des objets. Il est par exemple possible de déplacer des fichiers d'un dossier à l'autre, ou de lâcher une icone sur une fenêtre pour ouvrir le document qui lui correspond. Mozilla et XUL fournissent une panoplie d'évènements qui se déclenchent lorsque un utilisateur essaie de déplacer un objet.

L'utilisateur commence le glissement en cliquant et en déplaçant la souris sans relacher le bouton. Le glissement finit quand l'utilisateur relâche le bouton. Des gestionnaires d'évènements sont appellés dans ces deux situations, ainsi que lors de certaines étapes intermédiaires.

Mozilla implémente le glisser-déposer à l'aide d'une session de glisser-déposer. Quand un utilisateur demande à faire glisser un objet, et que celui-ci est susceptible d'être glissé-déposé, une session est initiée. La session se charge de modifier le curseur de la souris là où l'objet peut être déposé. Si l'objet ne supporte pas le glisser déposer, la session n'est pas créée. L'utilisateur n'ayant en général qu'une souris, une seule session est active à un instant donné.

Notez que la session peut être créée depuis Mozilla, mais aussi par d'autres applications. Le cas échéant, Mozilla s'occupe de traduire la session.

La liste qui suit décrit tous les gestionnaires d'évènements pouvant être appellés, et que n'importe quel élément peut implémenter. Vous n'avez à définir que les évènements qui vous intéressent.

ondraggesture

Appellé quand l'utilisateur commence à glisser l'élément, ce qui arrive quand l'utilisateur garde le bouton appuyé et déplace la souris. Le script qui intercepte cet évènement doit mettre en place une session de glisser-déposer.

ondragover

Appellé pour un élément survolé par le glisser. Si l'objet peut être lâché ici, vous le signalez à la session.

ondragenter

Appellé quand le glisser entre dans l'espace aérien de l'élément. Cela permet à l'élément de changer d'apparence pour signifier à l'utilisateur qu'il peut lâcher ici.

ondragexit

Appellé quand le glisser cesse de survoler l'élément. Et également quand le glisser-déposer s'achève. Cela permet ainsi de retablir l'apparence de l'élément ou de faire d'autres choses.

ondragdrop

Appellé quand le glisser-déposer s'achève sur l'élément. À ce moment là, l'utilisateur a déjà relaché le bouton de la souris. L'élément peut choisir d'ignorer l'évènement, ou réagir en insérant l'objet glissé par exemple.

Il y a deux façons de gérer les évènements de glisser-déposer. La première passe par l'emploi direct des interfaces de glisser-déposer XPCOM. La seconde est de passer par un conteneur javascript qui vous décharge d'une partie du travail. Ce conteneur est inclus dans le paquet "toolkit" ou "global" de Mozilla.

Le glisser-déposer avec XPCOM

Deux interfaces sont utilisées pour le glisser-déposer. La première est un service de glisser-déposer, nsIDragService, et la seconde est la session, nsIDragSession.

nsIDragService est responsable de la création de session quand le glissement commence, et de sa destruction quand le glissement s'achève. Sa fonction invokeDragSession doit être appellée pour commencer le glisser-déposer, dans le contexte d'un évènement ondraggesture. Une fois cette fonction appellée, le glisser-déposer a commencé.

La fonction invokeDragSession prend quatre paramètres, décris ci-après :

invokeDragSession(element,transferableArray,region,actions);

element

Une référence à l'élément à glisser-déposer. On l'obtient en accédant à la propriété event.target dans le gestionnaire d'évènement.

transferableArray

Un tableau d'objets nsITransferable, un par élément glissé-déposé. On utilise un tableau pour pouvoir déplacer plusieurs éléments d'un coup, comme un ensemble de fichiers.

region

Une région utilisée pour donner un retour à l'utilisateur. Mettre à null dans la majorité des cas.

actions

Les actions utilisées par le glisser-déposer. Elles peuvent prendre l'une des valeurs de constantes suivantes, ou une combinaison de ces valeurs. L'action peut être changée pendant le glisser-déposer selon l'élément qui est survolé :

nsIDragSession.DRAGDROP_ACTION_NONE

Indique qu'aucune action de glisser-déposer n'est valide.

nsIDragSession.DRAGDROP_ACTION_COPY

L'élément glissé-déposé peut être copié lors du lâcher.

nsIDragSession.DRAGDROP_ACTION_MOVE

L'élément peut être déplacé lors du lâcher.

nsIDragSession.DRAGDROP_ACTION_LINK

Un lien (raccourci ou alias) peut être créé là où a lieu le lâcher.

L'interface nsIDragService fournit également la fonction getCurrentSession, qui peut être appellée dans le contexte d'un des évènements de glisser-déposer pour accéder à, et modifier, l'état du glisser-déposer. Cette fonction renvoie un objet implémentant nsIDragSession.

L'interface nsIDragSession sert à modifier les propriétés du glisser-déposer en cours. Elle expose les propriétés et méthodes suivantes :

canDrop

Affectez true à cette propriété si l'élément en dessous du curseur pourrait accepter que l'élément glissé soit déposé, et false si ce n'est pas envisageable. Modifier cette valeur dans le contexte d'évènements ondragover et ondragenter.

dragAction

Détermine l'action à entreprendre au lâcher, sous forme d'une combinaison des constantes décrites plus haut. Permet de fournir un meilleur retour à l'utilisateur.

numDropItems

Le nombre d'objets déplacés. Par exemple, si l'on déplace cinq marque-pages, ce sera 5.

getData (transfer,index)

Obtenir des objets déplacés. Le premier argument est un objet nsITransferable qui recevra la réponse, le second est l'indice de l'élément à retourner.

sourceDocument

Le document où le glisser-déposer a commencé.

sourceNode

Le noeud DOM où le glisser-déposer a commencé.

isDataFlavorSupported(flavour)

Renvoie true si parmi les données déplacées on en trouve avec le type indiqué (flavour).

---

Dans la prochaîne section, nous verrons comment utiliser le conteneur Javascript pour le glisser-déposer.