Révision 441307 sur Glisser et déposer

  • Raccourci de la révision : Glisser_et_déposer
  • Titre de la révision : Glisser et déposer
  • ID de la révision : 441307
  • Créé :
  • Créateur : Delapouite
  • Version actuelle ? Non
  • Commentaire removed unique delete tag
Étiquettes : 

Contenu de la révision

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 dans 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.

Je ne traiterai ici que du traitement du glisser-déposer par Firefox 3.5 (Gecko 1.9.1) et ultérieur. Pour les versions précédentes, vous référer à la documentation de l'ancienne API.

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'information.
  3. Les types de glissement autorisés. Ils 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'information 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 sont déclenchés. 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és à 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'information.
dragenter
Évènement levé quand la souris entre au-dessus d'un élément alors qu'elle est en train d'effectuer un glissage. 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'information.
dragover
Cet évènement est levé quand la souris se déplace au-dessus 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.
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 glissage 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'information
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 glissage » pour plus d'information.

Source de la révision

<p>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 dans 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.</p>
<div class="note">
  Je ne traiterai ici que du traitement du glisser-déposer par Firefox 3.5 (Gecko 1.9.1) et ultérieur. Pour les versions précédentes, vous référer à la documentation de <a href="/en/Drag_and_Drop" title="https://developer.mozilla.org/en/Drag_and_Drop">l'ancienne API</a>.</div>
<h2 class="note" id="Les_bases_du_glisser-d.C3.A9poser">Les bases du glisser-déposer</h2>
<p>On doit fournir certaines informations au lancement du glisser-déposer:</p>
<ol>
  <li>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 « <a href="/Types_de_données_glissables" title="Types de données glissables">Types de données glissables</a> ».</li>
  <li>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 « <a href="/Paramétrer_l'image_affichée_pendant_le_glissement" title="Paramétrer l'image affichée pendant le glissement">Paramétrer l'image affichée pendant le glissement</a> » pour plus d'information.</li>
  <li>Les types de glissement autorisés. Ils en existe trois : (1) <code>copy</code> 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) <code>move </code>est utilisé quand les données doivent être supprimées de l'emplacement initial et (3) <code>link </code>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 à « <a href="/Types_de_glissement" title="Types de glissement">Types de glissement</a> » pour plus d'information.</li>
</ol>
<p>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 à « <a href="/Glisser_et_déposer_plusieurs_éléments" title="Glisser et déposer plusieurs éléments">Glisser et déposer plusieurs éléments</a> » pour plus d'information.</p>
<p>Reportez-vous à la page « <a href="/Types_de_données_recommandées_dans_le_glisser-déposer" title="Types de données recommandées dans le glisser-déposer">Types de données recommandées dans le glisser-déposer</a> » pour une liste des types utiles.</p>
<p>Nous avons aussi des références rapides des bonnes pratiques lors de l'utilisation des éléments:</p>
<ul>
  <li>Texte</li>
  <li>Lien</li>
  <li>HTML et XML</li>
  <li>Fichiers</li>
  <li>Images</li>
  <li>Nœud de document</li>
</ul>
<p>Reportez-vous à « <a href="/fr/DOM/DataTransfer" title="https://developer.mozilla.org/fr/DOM/DataTransfer">Transfert de données</a> » pour plus d'information sur l'objet <code>DataTransfer</code>.</p>
<h2 id=".C3.89v.C3.A8nements_li.C3.A9s_au_glisser-d.C3.A9poser">Évènements liés au glisser-déposer</h2>
<p>Lors de l'opération de glisser-déposer, un certain nombre d'évènements sont déclenchés. Notez bien que seul les évènements de glisser sont déclenchés ; les évènements liés à la souris comme <code>mousemove</code> ne sont pas déclenchés.</p>
<p>La propriété <code>dataTransfer</code> de tous les éléments de glisser recueille les données liés à l'opération de glisser-déposer.</p>
<dl>
  <dt>
    dragStart</dt>
  <dd>
    Évènement levé lors du démarrage du glisser-déposer. L'utilisateur demande de déplacer l'objet passé par l'évènement <code>dragstart</code>. 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 « <a href="/Démarrer_une_opération_de_glissage" title="Démarrer une opération de glissage">Démarrer une opération de glissage</a> » pour plus d'information.</dd>
  <dt>
    dragenter</dt>
  <dd>
    Évènement levé quand la souris entre au-dessus d'un élément alors qu'elle est en train d'effectuer un glissage. 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 « <a href="/Préciser_les_cibles_de_dépose" title="Préciser les cibles de dépose">Préciser les cibles de dépose</a> » pour plus d'information.</dd>
  <dt>
    dragover</dt>
  <dd>
    Cet évènement est levé quand la souris se déplace au-dessus 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 <code>dragenter</code>. Reportez-vous à la page « <a href="/Préciser_les_cibles_de_dépose" title="Préciser les cibles de dépose">Préciser les cibles de dépose</a> » pour plus d'information.</dd>
  <dt>
    drag</dt>
  <dd>
    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.</dd>
  <dt>
    drop</dt>
  <dd>
    L'évènement <code>drop </code>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 glissage 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 à « <a href="/Effectuer_une_dépose" title="Effectuer une dépose">Effectuer une dépose</a> » pour plus d'information</dd>
  <dt>
    dragend</dt>
  <dd>
    L'emplacement de départ du glissage sera informé par un évènement <code>dragend</code> que l'opération de glisser-déposer est terminée, quel qu'en soit l'issue. Reportez-vous à « <a href="/Terminer_un_glissage" title="Terminer un glissage">Terminer un glissage</a> » pour plus d'information.</dd>
</dl>
Revenir à cette révision