Glisser et déposer

Firefox et d'autres applications Mozilla supportent diverses fonctionnalités pour la gestion du glisser et déposer. Elles permettent à l'utilisateur de cliquer en maintenant le bouton de la souris appuyé sur un élément, de déplacer celui-ci ailleurs, et de relâcher le bouton de la souris pour le déposer au nouvel emplacement. L'élément en cours de déplacement est alors représenté de manière translucide en suivant le déplacement de la souris lors de son glissement. L'emplacement du dépôt peut être une application différente. Les sites Web, les extensions et les applications XUL font un usage de cette fonctionnalité pour personnaliser les éléments pouvant être déplacés, le résultat du glissement, et là où les éléments peuvent être déposés.

Cet article traite de fonctionnalités introduites dans Firefox 3.5 (Gecko 1.9.1). Pour les anciennes API valables pour Firefox 3.0 et versions antérieures, consultez la documentation ancienne de l'API.

Les bases du Glisser Déposer

Lorsqu'un glissement débute, certaines informations doivent être fournies :

  • les données devant être glissées, pouvant être un ensemble de formats différents. Par exemple, une donnée textuelle contenant une chaîne de caractères pouvant être glissée. Pour plus d'informations, consultez Données glissées.
  • l'image filigrane qui apparaît sous le curseur de la souris lors de l'opération de glissement. Cette image peut être personnalisée, mais la plupart du temps, elle sera générée par défaut en fonction de l'élément d'origine de la souris. Pour en savoir plus sur les images filigranes glissantes, consultez Configuration de l'image filigrane glissante
  • effets permis du glissement. Trois de ces effets sont permis : copy pour indiquer que les données glissées seront copiées vers la zone de dépôt, move pour indiquer que les données glissées seront déplacées vers la zone de dépôt, et link pour indiquer qu'une sorte de relation ou connexion existera entre la zone d'origine et la zone de dépôt. Pendant les opérations de glissement, ses effets peuvent être modifiés en fonction des possibilités de dépôt selon les emplacements. Consultez Effets du glissement pour plus de détails.

Mozilla et Firefox supporte quelques fonctionnalités non standards du modèle Glisser Déposer. Elles vous permettent de déplacer des objets multiples et des données non textuelles. Pour plus d'information, consultez Glisser et Déposer des objets multiples.

Consultez les types de glissement recommandés pour une liste de types habituellement utilisés pour du Glisser Déposer.

Vous pouvez consultez quelques exemples pratiques pour le glissement des types suivants :

Consultez DataTransfert pour une référence à l'objet DataTransfer.

Événements Glisser

Certains événements sont déclenchés à divers moments d'une opération de Glisser Déposer. Vous noterez que seuls des événements de glissement sont déclenchés ; les événements de la souris tels que mousemove ne le sont pas.

La propriété dataTransfer commune à tous les événements de glissement contient les données concernant l'opération de Glisser Déposer.

dragstart
se déclenche sur un élément lorsque un glissement débute. L'utilisateur est sollicité pour déterminer à quel élément l'événement dragstart est associé. Durant cet événement, un scrutateur définira les informations associées au glissement telles que les données et l'image. Pour plus d'information, consultez Démarrer une opération de glissement.
dragenter
se déclenche lors du premier déplacement de la souris au dessus d'un élément lors d'un glissement. Un scrutateur pour cet événement devra indiquer si le dépôt est permis à cet emplacement. S'il n'y a aucun scrutateur ou que ceux-ci ne réalisent aucune opération, alors le dépôt ne sera pas autorisé par défaut. Cet événement sert aussi à surveiller si vous souhaitez indiquer qu'un dépôt est possible, comme avec un marqueur visuel particulier. Pour plus d'information, consultez Spécifier des cibles pour les dépôts.
dragover
Cet événement se déclenche lorsque la souris se déplace au dessus d'un élément lors d'un glissement. La plupart du temps, l'opération qui s'opère par le scrutateur est la même que celle de l'événement dragenter. Pour plus d'information, consultez Spécifier des cibles pour les dépôts.
dragleave
Cet événement se déclenche lorsque la souris quitte un élément lors d'un glissement. Les scrutateurs doivent enlever touts les marqueurs visuels utilisés comme indication d'un dépôt possible.
drag
Cet événement est déclenché à l'origine du glissement, c'est-à-dire l'élément d'où dragstart a été déclenché.
drop
L'événement drop est déclenché sur l'élément où le dépôt est réalisé à la fin du glissement. Un scrutateur doit s'occuper de récupérer les données glissées et de les insérer à l'emplacement du dépôt. Cet événement ne se déclenchera uniquement si un dépôt est désiré. Il ne le sera pas si l'utilisateur annule l'opération de glissement, en appuyant par exemple sur la touche d'échappement, ou si la souris est relachée dans une zone non valide pour le glissement. Pour plus d'information, consultez Réaliser un dépôt.
dragend
L'origine du glissement recevra un événement dragend lorque l'opération de glissement sera terminée avec ou sans succès. Consultez Terminer un glissement pour plus d'information.

Étiquettes et contributeurs liés au document

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