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

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!

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

See also