Glisser et déposer

  • Raccourci de la révision : GlisserDéposer/Glisser_et_déposer
  • Titre de la révision : Glisser et déposer
  • ID de la révision : 275374
  • Créé :
  • Créateur : Chbok
  • Version actuelle ? Non
  • Commentaire 965 words added, 11 words removed

Contenu de la révision

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 and Firefox support a number of features not in the standard drag and drop model. These allow you to drag multiple items and drag non-string data. For more information, see Dragging and Dropping Multiple Items

For a list of common data types used for drag and drop, see Recommended Drag Types

A quick reference is available for the best practice for dragging the following kinds of items:

See DataTransfer for a reference to the DataTransfer object.

Drag events

A number of events are used which are fired during various stages of the drag and drop operation. Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation.

The dataTransfer property of all drag events holds data about the drag and drop operation.

dragstart
Fired on an element when a drag is started. The user is requesting to drag the element the dragstart event is fired at. During this event, a listener would set information such the drag data and image to be associated with the drag. For information about this, see Starting a Drag Operation.
dragenter
Fired when the mouse is first moved over an element while a drag is occuring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default. This is also the event to listen to if you want to provide feedback that a drop is allowed such as displaying a highlight or insertion marker. For information about this, see Specifying Drop Targets.
dragover
This event is fired as the mouse is moved over an element when a drag is occuring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. For information about this, see Specifying Drop Targets.
dragleave
This event is fired when the mouse leaves an element while a drag is occuring. Listeners should remove any highlighting or insertion markers used for drop feedback.
drag
This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation.
drop
The drop event is fired on the element where the drop was occured at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation, for example by pressing the Escape key, or if the mouse button was released while the mouse was not over a valid drop target. For information about this, see Performing a Drop.
dragend
The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. See Finishing a Drag for more information.

{{ languages( { "en": "En/DragDrop/Drag_and_Drop" } ) }} {{ languages( { "ja": "Ja/DragDrop/Drag_and_Drop" } ) }}

Source de la révision

<p>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.</p>
<div class="note">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 <a href="/fr/Glisser_et_d%C3%A9poser" title="Documentation ancienne de l'API">la documentation ancienne de l'API.</a></div>
<h2>Les bases du Glisser Déposer</h2>
<p>Lorsqu'un glissement débute, certaines informations doivent être fournies :</p>
<ul> <li>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 <a href="/fr/GlisserD%C3%A9poser/Op%C3%A9rations_de_glissement#dragdata" title="Données glissées">Données glissées</a>.</li> <li>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 <a href="/fr/GlisserD%C3%A9poser/Op%C3%A9rations_de_glissement#dragfeedback" title="Configuration de l'image filigrane glissante">Configuration de l'image filigrane glissante</a></li> <li>effets permis du glissement. Trois de ces effets sont permis : <code>copy</code> pour indiquer que les données glissées seront copiées vers la zone de dépôt, <code>move</code> pour indiquer que les données glissées seront déplacées vers la zone de dépôt, et <code>link</code> 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 <a href="/fr/GlisserD%C3%A9poser/Op%C3%A9rations_de_glissement#drageffects" title="Effets du glissement">Effets du glissement</a> pour plus de détails.</li>
</ul>
<p>Mozilla and Firefox support a number of features not in the standard drag and drop model. These allow you to drag multiple items and drag non-string data. For more information, see <a href="/En/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></p>
<p>For a list of common data types used for drag and drop, see <a href="/En/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a></p>
<p>A quick reference is available for the best practice for dragging the following kinds of items:</p>
<ul> <li><a href="/En/DragDrop/Recommended_Drag_Types#text" title="Text">Text</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#link" title="Links">Links</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#html" title="HTML and XML">HTML and XML</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#file" title="Files">Files</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#image" title="Images">Images</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#node" title="Document Nodes">Document Nodes</a></li>
</ul>
<p>See <a href="/En/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> for a reference to the DataTransfer object.</p>
<h2 name="events">Drag events</h2>
<p>A number of events are used which are fired during various stages of the drag and drop operation. Note that only drag events are fired; mouse events such as <code>mousemove</code> are not fired during a drag operation.</p>
<p>The <a href="/En/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> property of all drag events holds data about the drag and drop operation.</p>
<dl> <dt>dragstart </dt><dd>Fired on an element when a drag is started. The user is requesting to drag the element the dragstart event is fired at. During this event, a listener would set information such the drag data and image to be associated with the drag. For information about this, see <a href="/En/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>. </dd><dt>dragenter </dt><dd>Fired when the mouse is first moved over an element while a drag is occuring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default. This is also the event to listen to if you want to provide feedback that a drop is allowed such as displaying a highlight or insertion marker. For information about this, see <a href="/En/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>. </dd><dt>dragover </dt><dd>This event is fired as the mouse is moved over an element when a drag is occuring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. For information about this, see <a href="/En/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>. </dd><dt>dragleave </dt><dd>This event is fired when the mouse leaves an element while a drag is occuring. Listeners should remove any highlighting or insertion markers used for drop feedback. </dd><dt>drag </dt><dd>This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation. </dd><dt>drop </dt><dd>The drop event is fired on the element where the drop was occured at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation, for example by pressing the Escape key, or if the mouse button was released while the mouse was not over a valid drop target. For information about this, see <a href="/En/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>. </dd><dt>dragend </dt><dd>The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. See <a href="/En/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a> for more information. </dd></dl>
<p>{{ languages( { "en": "En/DragDrop/Drag_and_Drop" } ) }} {{ languages( { "ja": "Ja/DragDrop/Drag_and_Drop" } ) }}</p>
Revenir à cette révision