MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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
Propagation
Oui
Annulable
Oui
Cible
Document, Element
Action par défaut
Initie l'opération de glisser-déposer

Properties

Propriété Type Description
target Lecture seule EventTarget L'élément qui doit être glissé.
type Lecture seule DOMString The type of event.
bubbles Lecture seule Boolean Whether the event normally bubbles or not
cancelable Lecture seule Boolean 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

<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

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

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

JavaScript Content

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

Spécification Statut Commentaire
WHATWG HTML Living Standard
La définition de 'dragstart' dans cette spécification.
Standard évolutif  
HTML5.1
La définition de 'dragstart' dans cette spécification.
Recommendation Définition initiale

Compatibilités navigateur

Navigateur Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support basique 4 3.5 (1.9.1) 10 12 3.1
Navigateur Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Support basique Pas de support Pas de support Pas de support Pas de support Pas de support 10 Pas de support Pas de support

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Kalwyn
 Dernière mise à jour par : Kalwyn,