dragover

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

L'événementdragover est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)

Informations générales

Interface: DragEvent
Propagation: Oui
Annulable: Oui
Cible: Document,Element
Action par défaut: Reset l'opération de glissement courante à "none"

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`	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 thedrag 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>  <div       draggable="true"    ondragstart="event.dataTransfer.setData('text/plain',null)">    This div is draggable  </div></div><div></div><div></div><div></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>