1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
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>
<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>
|
