diff options
Diffstat (limited to 'files/es/web/api/dragevent/index.html')
| -rw-r--r-- | files/es/web/api/dragevent/index.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/files/es/web/api/dragevent/index.html b/files/es/web/api/dragevent/index.html new file mode 100644 index 0000000000..8599ef6b93 --- /dev/null +++ b/files/es/web/api/dragevent/index.html @@ -0,0 +1,110 @@ +--- +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> |