Drag and Drop

Obsolète depuis Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Depuis Gecko 1.9.1 (Firefox 3.5), ces API sont officiellement obsolètes, les API portables plus récentes et plus simple doivent être utilisées à leur place.

Cette section décrit comment implémenter des objets qui peuvent être glissés et déposés sur d'autres objets.

L'interface glisser-déposer

De nombreuses interfaces utilisateur permettent de faire glisser des objets particuliers dans l'interface. Par exemple, faire glisser des fichiers vers d'autres répertoires ou faire glisser une icône vers une autre fenêtre pour ouvrir le document auquel elle fait référence. Mozilla et XUL fournissent un certain nombre d'événements qui peuvent gérer lorsque l'utilisateur tente de faire glisser des objets.

Un utilisateur peut commencer à faire glisser en maintenant le bouton de la souris enfoncé et en déplaçant la souris. Le glissement s'arrête lorsque l'utilisateur relâche la souris. Les gestionnaires d'événements sont appelés lorsque l'utilisateur démarre et termine le glissement, et à divers points intermédiaires.

Mozilla implémente le glissement en utilisant une session de glissement. Lorsqu'un utilisateur demande à faire glisser quelque chose qui peut être glissé, une session de glissement doit être lancée. La session de glissement gère la mise à jour du curseur de la souris et l'emplacement où l'objet doit être déposé. Si quelque chose ne peut pas être glissé, il ne doit pas démarrer une session de glisser. Étant donné que l'utilisateur n'a généralement qu'une seule souris, une seule session de glissement est en cours d'utilisation à la fois.

Notez que les sessions de glissement peuvent être créées depuis Mozilla lui-même ou depuis d'autres applications. Mozilla traduira les données glissées selon les besoins.

La liste ci-dessous décrit les gestionnaires d'événements qui peuvent être appelés, qui peuvent être placés sur n'importe quel élément. Il vous suffit de mettre des valeurs pour les gestionnaires là où vous devez faire quelque chose lorsque l'événement se produit.

ondrag
Appelé périodiquement tout au long de l'opération de glisser-déposer.
ondraggesture 
Appelé lorsque l'utilisateur commence à faire glisser l'élément, ce qui se produit normalement lorsque l'utilisateur maintient le bouton de la souris enfoncé et déplace la souris. Le script de ce gestionnaire doit configurer une session de glissement.
ondragstart  
Un alias pour ondraggesture; il s'agit du nom de spécification HTML 5 de l'événement et peut être utilisé en HTML ou XUL; cependant, pour une compatibilité descendante avec les anciennes versions de Firefox, vous souhaiterez peut-être continuer à utiliser ondraggesture dans XUL.
ondragover 
Ce gestionnaire d'événements est appelé pour un élément lorsque quelque chose est glissé dessus. Si l'objet peut être déposé sur l'élément, la session de glissement doit être notifiée.
ondragenter 
Appelé pour un élément lorsque le pointeur de la souris passe pour la première fois sur l'élément pendant que quelque chose est déplacé. Cela peut être utilisé pour modifier l'apparence de l'élément pour indiquer à l'utilisateur que l'objet peut être déposé dessus.
ondragexit 
Appelé pour un élément lorsque le pointeur de la souris sort d'un élément pendant que quelque chose est déplacé. Il est également appelé une fois qu'une suppression est terminée afin qu'un élément ait une chance de supprimer toute mise en évidence ou autre indication.
ondragdrop 
Ce gestionnaire d'événements est appelé pour un élément lorsque quelque chose est déposé sur l'élément. À ce stade, l'utilisateur a déjà relâché le bouton de la souris. L'élément peut simplement ignorer l'événement ou le gérer d'une manière ou d'une autre, par exemple en collant l'objet glissé sur lui-même.
ondragend  
Appelé lorsque l'opération de glissement est terminée.

Il existe deux façons de gérer les événements par glisser-déposer. Cela consiste d'abord à utiliser directement les interfaces XPCOM glisser-déposer. La seconde consiste à utiliser un objet wrapper JavaScript qui gère une partie de cela pour vous. Le code de ce wrapper se trouve dans un fichier nommé toolkit/content/nsDragAndDrop.js nsDragAndDrop.js qui est contenu dans le package widget-toolkit (ou global).

Interfaces XPCOM Glisser-déposer

Deux interfaces sont utilisées pour prendre en charge le glisser-déposer. Le premier est un service de glissement, nsIDragService et le second est la session de glissement, nsIDragSession.

Le nsIDragService est responsable de la création de sessions de glissement lorsqu'un glissement démarre et de la suppression de la session de glissement lorsque le glissement est terminé. La fonction invokeDragSession doit être appelée pour démarrer un glissement dans un gestionnaire d'événements ondraggesture. Une fois cette fonction appelée, un glissement a commencé.

La fonction invokeDragSession prend quatre paramètres, comme décrit ci-dessous:

invokeDragSession(element,transferableArray,region,actions)
element 
Une référence à l'élément qui est déplacé. Cela peut être récupéré en obtenant la propriété event.target pendant le gestionnaire d'événements.
transferableArray 
Un tableau d'objets nsITransferable, un pour chaque élément glissé. Un tableau est utilisé car vous souhaiterez peut-être faire glisser plusieurs objets à la fois, comme un ensemble de fichiers.
region 
Une région utilisée pour l'indication de rétroaction. Cela devrait généralement être défini sur null.
actions 
Les actions utilisées par le glissement. Cela doit être défini sur l'une des constantes suivantes, ou sur plusieurs ajoutées. L'action peut être modifiée pendant le glissement en fonction de ce qui est glissé.
nsIDragService.DRAGDROP_ACTION_NONE 
Utilisé pour indiquer qu'aucun glissement n'est valide.
nsIDragService.DRAGDROP_ACTION_COPY 
L'élément déplacé doit être copié vers son emplacement de dépôt.
nsIDragService.DRAGDROP_ACTION_MOVE 
L'élément déplacé doit être déplacé vers son emplacement de dépôt.
nsIDragService.DRAGDROP_ACTION_LINK 
Un lien (ou un raccourci ou un alias) vers l'élément en cours de glissement doit être créé à l'emplacement de dépôt.

L'interface nsIDragService fournit également la fonction getCurrentSession qui peut être appelée depuis les gestionnaires d'événements de glissement pour obtenir et modifier l'état du glissement. La fonction renvoie un objet qui implémente nsIDragSession.

L'interface nsIDragSession est utilisée pour obtenir et définir les propriétés du glissement en cours. Les propriétés et méthodes suivantes sont disponibles:

canDrop 
Définissez cette propriété sur true si l'élément sur lequel se trouve actuellement la souris peut accepter que l'objet actuellement glissé soit déposé dessus. Définissez la valeur sur false si cela n'a pas de sens d'y déposer l'objet. Cela doit être modifié dans les gestionnaires d'événements ondragover et ondragenter.
dragAction 
Défini sur l'action en cours à effectuer, qui doit être une ou plusieurs des constantes décrites précédemment. Cela peut être utilisé pour fournir des commentaires supplémentaires à l'utilisateur.
numDropItems 
Le nombre d'éléments glissés. Par exemple, il sera défini sur 5 si cinq signets sont déplacés.
getData(transfer,index) 
Récupérez les données glissées. Le premier argument doit être un objet nsITransferable pour contenir les données. Le deuxième argument, index, doit être l'index de l'élément à renvoyer.
sourceDocument 
Le document où le glissement a commencé
sourceNode 
Le nœud DOM où le glissement a commencé.
isDataFlavorSupported(flavor) 
Renvoie true si les données déplacées contiennent des données de la saveur spécifiée.

Informations sur le Document Original