drag
====

L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)

Informations générales
----------------------

Interface
`DragEvent` (en-US)
Propagation

Oui

Annulable

Oui

Cible
`Document`, `Element`
Action par défaut

Continuer l'opération drag & drop.

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The element that was underneath the element being dragged. |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` (en-US) | Whether the event normally bubbles or not |
| `cancelable` Lecture seule  | `Boolean` (en-US) | Whether the event is cancellable or not? |
| `view` Lecture seule  | `WindowProxy` | `document.defaultView` (`window` of the document) |
| `detail` Lecture seule  | `long` (`float`) | 0. |
| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode. |
| `currentTarget` Lecture seule  | EventTarget | The node that had the event listener attached. |
| `relatedTarget` Lecture seule  | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. |
| `screenX` Lecture seule  | long | The X coordinate of the mouse pointer in global (screen) coordinates. |
| `screenY` Lecture seule  | long | The Y coordinate of the mouse pointer in global (screen) coordinates. |
| `clientX` Lecture seule  | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. |
| `clientY` Lecture seule  | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. |
| `button` Lecture seule  | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. |
| `buttons` Lecture seule  | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info. |
| `mozPressure` Lecture seule  | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). |
| `ctrlKey` Lecture seule  | boolean | `true` if the control key was down when the event was fired. `false` otherwise. |
| `shiftKey` Lecture seule  | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. |
| `altKey` Lecture seule  | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. |
| `metaKey` Lecture seule  | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. |

Exemple
-------


```html
<div class="dropzone">
  <div
 id="draggable"
 draggable="true"
 ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

<style>
 #draggable {
 width: 200px;
 height: 20px;
 text-align: center;
 background: white;
 }

 .dropzone {
 width: 200px;
 height: 20px;
 background: blueviolet;
 margin-bottom: 10px;
 padding: 10px;
 }
</style>

<script>
 var dragged;

 /\* Les événements sont déclenchés sur les objets glissables \*/
 document.addEventListener("drag", function (event) {}, false);

 document.addEventListener(
 "dragstart",
 function (event) {
 // Stocke une référence sur l'objet glissable
 dragged = event.target;
 // transparence 50%
 event.target.style.opacity = 0.5;
 },
 false,
 );

 document.addEventListener(
 "dragend",
 function (event) {
 // reset de la transparence
 event.target.style.opacity = "";
 },
 false,
 );

 /\* Les événements sont déclenchés sur les cibles du drop \*/
 document.addEventListener(
 "dragover",
 function (event) {
 // Empêche default d'autoriser le drop
 event.preventDefault();
 },
 false,
 );

 document.addEventListener(
 "dragenter",
 function (event) {
 // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
 if (event.target.className == "dropzone") {
 event.target.style.background = "purple";
 }
 },
 false,
 );

 document.addEventListener(
 "dragleave",
 function (event) {
 /\* reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent \*/
 if (event.target.className == "dropzone") {
 event.target.style.background = "";
 }
 },
 false,
 );

 document.addEventListener(
 "drop",
 function (event) {
 // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
 event.preventDefault();
 // Déplace l'élément traîné vers la cible du drop sélectionnée
 if (event.target.className == "dropzone") {
 event.target.style.background = "";
 dragged.parentNode.removeChild(dragged);
 event.target.appendChild(dragged);
 }
 },
 false,
 );
</script>
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # ix-handler-ondrag |
| HTML Standard # event-dnd-drag |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `drag`
* `dragstart`
* `dragend`
* `dragover`
* `dragenter`
* `dragleave`
* `dragexit`
* `drop`
* Demo