Glisser et déposer

Firefox et les autres applications Mozilla proposent plusieurs solutions pour gérer le glisser-déposer. L'utilisateur peut alors cliquer sur un élément, et — tout en gardant le bouton de la souris enfoncé — le glisser à un autre endroit puis relâcher le bouton pour le déposer. Une image transparente de l'objet glissé suit le pointeur de la souris pendant le déplacement. Il est même possible de glisser des objets dans une autre application ! On peut utiliser cette fonction à la fois sur les sites internet, mais aussi dans les extensions et les applications basées sur XUL ; à chaque fois, on peut choisir quels éléments peuvent être glissés, l'image affichée pendant le glissement et l'endroit où on peut déposer les éléments.

Les bases du glisser-déposer

On doit fournir certaines informations au lancement du glisser-déposer:

1. Les données à glisser, qui peuvent être de format varié, comme par exemple des données textuelles avec une chaîne de caractères. Reportez-vous à la page « Types de données glissables ».
2. L'image de fond qui sera affichée sous le pointeur de la souris pendant l'opération de glissement. Cette image peut être modifiée, bien que, la plupart du temps, on ne précise rien et une image par défaut basée sur les éléments sélectionnés sera créée. Reportez-vous à la page « Paramétrer l'image affichée pendant le glissement » pour plus d'informations.
3. Les types de glissement autorisés. Il en existe trois : (1) copy indique que les données glissées seront copiées de leur emplacement présent vers l'emplacement où elles seront déposées, (2) move est utilisé quand les données doivent être supprimées de l'emplacement initial et (3) link va demander la création d'un lien ou d'une relation entre les emplacements initiaux et finaux. Pendant l'opération de glissement, le type de glissement peut être modifié si les types de glissement permis dépendent de l'emplacement où sera déposé l'objet. Reportez-vous à « Types de glissement » pour plus d'information.

De plus, Mozilla et Firefox supportent certains comportements absents du modèle standard du glisser-déposer. Vous pouvez par exemple glisser plusieurs éléments ou glisser des données non textuelles. Reportez-vous à « Glisser et déposer plusieurs éléments » pour plus d'information.

Reportez-vous à la page « Types de données recommandées dans le glisser-déposer » pour une liste des types utiles.

Nous avons aussi des références rapides des bonnes pratiques lors de l'utilisation des éléments :

• Texte
• Lien
• HTML et XML
• Fichiers
• Images
• Nœud de document

Reportez-vous à « Transfert de données » pour plus d'informations sur l'objet DataTransfer.

Évènements liés au glisser-déposer

Lors de l'opération de glisser-déposer, un certain nombre d'évènements est déclenché. Notez bien que seul les évènements de glisser sont déclenchés ; les évènements liés à la souris comme mousemove ne sont pas déclenchés.

La propriété dataTransfer de tous les éléments de glisser recueille les données liées à l'opération de glisser-déposer.

dragStart

Évènement levé lors du démarrage du glisser-déposer. L'utilisateur demande de déplacer l'objet passé par l'évènement dragstart. Pendant cet évènement, un écouteur va enregistrer des informations comme les données glissées et l'image à associer au glissage. Reportez-vous à la page « Démarrer une opération de glissage » pour plus d'informations.

dragenter

Évènement levé quand la souris entre au-dessus d'un élément alors qu'elle est en train d'effectuer un glissement. Un écouteur devrait nous indiquer s'il est permis de déposer l'objet à cet emplacement. S'il n'existe pas d'écouteur, ou qu'un écouteur ne permet pas d'opération, alors il est interdit de déposer l'objet ici ; c'est le comportement par défaut. Pensez à écouter cet évènement si vous voulez indiquer à votre utilisateur qu'il peut déposer l'objet ici, par exemple en surlignant l'emplacement ou en affichant une marque. Reportez-vous à la page « Préciser les cibles de dépose » pour plus d'informations.

dragover

Cet évènement est levé quand la souris se déplace au-dessus d'un élément alors qu'elle est en train d'effectuer un glissage. La plupart du temps , les opérations seront les mêmes que pour l'évènement dragenter. Reportez-vous à la page « Préciser les cibles de dépose » pour plus d'information.

dragleave

  Cet événement est déclenché lorsque la souris quitte un élément pendant une opération de deplacement en cours.

drag

Cet évènement est déclenché quand la souris quitte un élément alors qu'elle est en train d'effectuer un glissage. Les écouteurs devraient alors supprimer toutes les marques utilisées pour indiquer à l'utilisateur qu'une dépose est possible.

drop

L'évènement drop est déclenché sur l'élément qui supporte la dépose une fois le glissage terminé. Un écouteur devra récupérer les données déplacées pour les insérer à l'emplacement de la dépose. Cet évènement sera seulement déclenché si on dépose effectivement l'objet : il ne sera par exemple pas déclenché si l'utilisateur annule le glissement en appuyant sur la touche « Échap. » ou si le bouton de la souris est relâché alors que la souris n'est pas sur un emplacement propice à la dépose. Reportez-vous à « Effectuer une dépose » pour plus d'informations.

dragend

L'emplacement de départ du glissage sera informé par un évènement dragend que l'opération de glisser-déposer est terminée, quel qu'en soit l'issue. Reportez-vous à « Terminer un glissement » pour plus d'informations.