dragstart
=========

L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.

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

Interface

`DragEvent` (en-US)

Propagation

Oui

Annulable

Oui

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

Initie l'opération de glisser-déposer

Properties
----------

| 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 : dropzone
------------------

### HTML Content


```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>
```

### CSS Content


```css
#draggable {
  width: 200px;
  height: 20px;
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin-bottom: 10px;
  padding: 10px;
}
```

### JavaScript Content


```js
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,
);
```

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

| Specification |
| --- |
| HTML Standard # ix-handler-ondragstart |
| HTML Standard # event-dnd-dragstart |

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`