diff options
| -rw-r--r-- | files/es/web/api/dragevent/index.html | 110 | ||||
| -rw-r--r-- | files/es/web/api/dragevent/index.md | 79 |
2 files changed, 79 insertions, 110 deletions
diff --git a/files/es/web/api/dragevent/index.html b/files/es/web/api/dragevent/index.html deleted file mode 100644 index 14e4922d44..0000000000 --- a/files/es/web/api/dragevent/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -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> - - - -<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> diff --git a/files/es/web/api/dragevent/index.md b/files/es/web/api/dragevent/index.md new file mode 100644 index 0000000000..1b53e16dba --- /dev/null +++ b/files/es/web/api/dragevent/index.md @@ -0,0 +1,79 @@ +--- +title: DragEvent +slug: Web/API/DragEvent +translation_of: Web/API/DragEvent +browser-compat: api.DragEvent +--- +{{APIRef("HTML Drag and Drop API")}} + +La interfaz **`DragEvent`** es un {{domxref("Event","DOM event")}} que representa una interacción de arrastrar y soltar. El usuario inicia el evento al posicionar el puntero sobre un elemento, seleccionándolo con el puntero y comenazado a arrasrrarlo a una nueva posición (Cambiando su ubicación en el DOM). Las aplicaciones tienen la libertad de interpretar esta interacción de una manera especifica en ella. + +Esta interfaz hereda propiedades de {{domxref("MouseEvent")}} y {{domxref("Event")}}. + +{{InheritanceDiagram}} + +## Propiedades + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : Los datos que son transferidos en un evento de arrastrar y soltar. + +## Constructores + +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. + +- {{domxref("DragEvent.DragEvent", "DragEvent()")}} + - : Crea un evento de arrastrado sintético y no confiable. + +## Tipos de eventos + +- {{event('drag')}} + - : Este evento se activa al arrastrar un elemento o texto selecionado. +- {{event('dragend')}} + - : La acción que activa éste evento es cuando una operación de arrastrado concluye (al dejar de presionar el punto del mouse o presioando la tecla `Esc`). +- {{event('dragenter')}} + - : Este evento es activado cuando un elemento o texto selecionado y arrastrado entra a una área de soltado válida. +- {{event('dragleave')}} + - : Este evento se activa cuando un elemento o texto seleccionado sale de una área de soltado válida. +- {{event('dragover')}} + - : Este evento es activado continuamente cuando un elemento o texto selecionado es arrrastrado y el punterose pocisiona sobre una área de soltado válido (cada 50ms WHEN el puntero no se encuentra en movimiento, ELSE 5ms cuando el puntero se mueve lentamente y 1ms cuando el movimiento es rápido. Este patrón de activación es diferente de {{Event("mouseover")}} ). +- {{event('dragstart')}} + - : Este evento se activa cuando el usuario comienza a hacer un arrastre sobre un elemento o texto seleccionado. +- {{event('drop')}} + - : Este evento se activa cuando un elemento o texto selecionado es soltado en un área de soltado válida. + +## Administrador de eventos globales + +- {{domxref('GlobalEventHandlers.ondrag')}} + - : Un {{domxref('GlobalEventHandlers','global event handler')}} para el evento {{event('drag')}}. +- {{domxref('GlobalEventHandlers.ondragend')}} + - : Un {{domxref('GlobalEventHandlers','global event handler')}} para el evento {{event('dragend')}}. +- {{domxref('GlobalEventHandlers.ondragenter')}} + - : Un {{domxref('GlobalEventHandlers','global event handler')}} para el evento {{event('dragenter')}}. +- {{domxref('GlobalEventHandlers.ondragleave')}} + - : Un {{domxref('GlobalEventHandlers','global event handler')}} para el evento {{event('dragleave')}}. +- {{domxref('GlobalEventHandlers.ondragover')}} + - : Un {{domxref('GlobalEventHandlers','global event handler')}} para el evento {{event('dragover')}}. +- {{domxref('GlobalEventHandlers.ondragstart')}} + - : Un {{domxref('GlobalEventHandlers','global event handler')}} para el evento {{event('dragstart')}}. +- {{domxref('GlobalEventHandlers.ondrop')}} + - : Un {{domxref('GlobalEventHandlers','global event handler')}} para el evento {{event('drop')}}. + +## Ejemplo + +Ejemplos para cada propiedad, constructor, tipo de evento y manejadores de eventos globales son incluidos en su respectiva página de referencia. + +## Especificaciones + +{{Specifications}} + +## Compatibilidad + +{{Compat}} + +## Véase también + +- [Arrastrar y soltar](/es/docs/Web/API/HTML_Drag_and_Drop_API) +- [Operaciones de arrastre](/es/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations) +- [Tipos de arrastre recomendados](/es/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types) +- [Arrastrando y soltando múltiples elementos](/es/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items) +- [DataTransfer test - Paste or Drag](https://codepen.io/tech_query/pen/MqGgap) |