dragover

El evento dragover se activa cuando un elemento o texto se arrastra a un objetivo válido (cada pocos cientos de milisegundos).

El evento se activa en la caída al objetivo.

General info

Bubbles	Yes
Cancelable	Yes
Target objects	`Document`, `Element`
Interface	`DragEvent`
Default Action	Reset the current drag operation to "none".

Properties

Property	Type	Description
`target` Read only	`EventTarget`	El elemento que se encontraba bajo el elemento que está siendo arrastrado.
`type` Read only	`DOMString`	El tipo de evento.
`bubbles` Read only	`Boolean`	Si el evento se propaga normalmente o no.
`cancelable` Read only	`Boolean`	Si el evento es cancelable o no.
`view` Read only	`WindowProxy`	`document.defaultView` (`window` del documento)
`detail` Read only	`long` (`float`)	0.
`dataTransfer`	DataTransfer	Los datos que subyacen a la operación de drag-and-drop , conocidas como drag data store. Modo protegido.
`currentTarget` Read only	EventTarget	El nodo que tiene adjunto el detector de eventos.
`relatedTarget` Read only	EventTarget	Para los eventos de `mouseover`, `mouseout`, `mouseenter` y `mouseleave`:El objetivo del evento complementario (el objetivo `mouseleave` en el caso del evento `mouseenter`). `null` sino.
`screenX` Read only	long	La coordinada X del puntro del ratón en coordenadas globales (de pantalla).
`screenY` Read only	long	La coordinada Y del puntero del ratón en coordenadas globales (en pantalla).
`clientX` Read only	long	La coordinada X del puntro del ratón en coordenadas locales (DOM content).
`clientY` Read only	long	La coordinada Y del puntro del ratón en coordenadas locales (DOM content).
`button` Read only	unsigned short	El número de botón que se preionó cuando el ecento fue ectivado: Botón izquierdo=0, botón del medio=1(en caso de que esté presente), botón derecho=2. Para ratones configurados para zurdos donde laas acciones están configuradas al contrario los valores se leerán de derecha a izquierda.
`buttons` Read only	unsigned short	Los botones presionados cuando el evento de ratón se activa: botón izquierdo=1,botón derecho=2, botón medio (rueda)=4, 4º botón (tipo "hacia atrás del navegador"=8, 5º botón ("tipo hacia delante en el navegador"=16. Si dos o más botones se presionan, devolverá la suma lógica de los valores. Ej: si se presionan los botones izquierdo y derecho, devolverá 3 (=1\|2). Más información.
`mozPressure` Read only	float	La cantidad de presión aplicada en dispositivos táctiles cuando se genera el evento; Este valor tiene un rango entre 0.0 (mínima presión) y 1.0 (máxima presión)
`ctrlKey` Read only	boolean	`true` si la tecla control estaba pulsada cuando el evento se lanzó `false` en cualquier otro caso.
`shiftKey` Read only	boolean	`true` si la tecla shift estaba pulsada cuando el evento de lanzó. `false` en otro caso.
`altKey` Read only	boolean	`true` si la tecla alt estaba pulsada cuando el evento se lanzó. `false` si no.
`metaKey` Read only	boolean	`true` si la tecla meta estaba presionada cuando el evento se disparó. `false` si no.

Example

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

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;
  }, false);

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

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);
</script>

Specifications

Specification	Status	Comment
HTML Living Standard La definición de 'dragover' en esta especificación.	Living Standard
HTML 5.1 La definición de 'dragover' en esta especificación.	Recommendation	Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Escritorio
Móvil

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	4	(Yes)	3.5 (1.9.1)	10	12	3.1

Feature	Android	Android Webview	Chrome for Android	Edge	Firefox Mobile (Gecko)	Firefox OS	IE Mobile	Opera Mobile	Safari Mobile
Basic support	Sin soporte	Sin soporte	Sin soporte	(Yes)	Sin soporte	Sin soporte	10	Sin soporte	Sin soporte