---
title: DragEvent
slug: Web/API/DragEvent
tags:
  - API
  - DragEvent
  - Referencia
  - arrastrar y soltar
  - drag and drop
translation_of: Web/API/DragEvent
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>

<p>La interfaz <strong><code>DragEvent</code></strong> es un {{domxref("Event","evento DOM")}} que representa una interacción de arrastrar y soltar. El usuario inicia un arrastre posicionando un dispositivo puntero (como un ratón) en la superficie táctil y luego arrastra el puntero a una nueva posición (como como elemento del DOM). Las aplicaciones son libres de interpretar una interacción de arrastrar y soltar en una manera específica a la aplicación.</p>

<p class="note">Esta interfaz hereda propiedades de {{domxref("MouseEvent")}} y {{domxref("Event")}}.</p>

<h2 id="Propiedades">Propiedades</h2>

<dl>
 <dt>{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}</dt>
 <dd>Los datos que son transferidos durante una interacción de arrastrar y soltar.</dd>
</dl>

<h2 id="Constructores">Constructores</h2>

<p class="note">A pesar que esta interfaz tiene un constructor, no es posible crear un objeto DataTransfer útil desde código, ya que los objetos {{domxref("DataTransfer")}} tienen un modelo de procesamiento y seguridad que está coordinado por el navegador durante el arrastrar y soltar.</p>

<dl>
 <dt>{{domxref("DragEvent.DragEvent", "DragEvent()")}}</dt>
 <dd>Crea un DragEvent sintético y que no es de confianza.</dd>
</dl>

<h2 id="Tipos_de_eventos">Tipos de eventos</h2>

<dl>
 <dt>{{event('drag')}}</dt>
 <dd>Este evento es lanzado cuando un elemento o selección de texto está siendo arrastrado.</dd>
 <dt>{{event('dragend')}}</dt>
 <dd>Este evento es lanzado cuando la operación de arrastrar está siendo terminada (liberando el botón del ratón o pulsando la tecla de escape).</dd>
 <dt>{{event('dragenter')}}</dt>
 <dd>Este evento es lanzado cuando un elemento arrastrado ingresa a un destino de liberación válido.</dd>
 <dt>{{event('dragexit')}}</dt>
 <dd>Este evento es lanzado cuando un elemento ya no es el destino de selección inmediato de la operación de arrastre.</dd>
 <dt>{{event('dragleave')}}</dt>
 <dd>Este evento es lanzado cuando el elemento arrastrado o selección de texto deja un destino de liberación válido.</dd>
 <dt>{{event('dragover')}}</dt>
 <dd>Este evento es lanzado continuamente cuando un elemento o selección de texto está siendo arrastrado y el puntero del ratón está sobre un destino de liberación válido (cada 50 ms CUANDO el ratón no se está moviendo SINO más rápido entre 5 ms (movimiento lento) y 1 ms (movimiento rápido) aproximadamente. Este patrón de disparo es diferente que {{Event("mouseover")}}).</dd>
 <dt>{{event('dragstart')}}</dt>
 <dd>Este evento es lanzado cuando el usuario empieza a arrastrar un elemento o selección de texto.</dd>
 <dt>{{event('drop')}}</dt>
 <dd>Este evento es lanzado cuando un elemento o selección de texto es soltado en un destino válido.</dd>
</dl>

<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>

<dl>
 <dt>{{domxref('GlobalEventHandlers.ondrag')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drag')}}.</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragend')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragend')}}.</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragenter')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragenter')}}.</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragexit')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragexit')}}.</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragleave')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragleave')}}.</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragover')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragover')}}.</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragstart')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragstart')}}.</dd>
 <dt>{{domxref('GlobalEventHandlers.ondrop')}}</dt>
 <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drop')}}.</dd>
</dl>

<h2 id="Ejemplo">Ejemplo</h2>

<p>Un ejemplo para cada propiedad, constructor, tipo de evento, y manejador de evento global están incluidos en sus respectivas páginas de referencia.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificaciones</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "#dragevent", "DragEvent")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>

<div class="hidden">La tabla de compatibilidad en esta pagina es generado desde datos estructurados. Si gustas contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un solicitud de cambios.</div>

<p>{{Compat("api.DragEvent")}}</p>

<h2 id="Ver_también">Ver también</h2>

<p>{{page("/en-US/docs/Web/API/DataTransfer", "Ver también")}}</p>