evento de arrastre
Descripción
El ondragevento ocurre cuando se arrastra una selección .
Arrastrar y soltar es una característica común en HTML. Es cuando «agarras» un objeto y lo arrastras a una ubicación diferente.
Para hacer que un elemento se pueda arrastrar, utilice onDrag=»true»
Los enlaces y las imágenes se pueden arrastrar de forma predeterminada y no necesitan el atributo arrastrable.
Muchos eventos ocurren en las diferentes etapas de una operación de arrastrar y soltar (ver a continuación):
Arrastrar eventos
En el elemento arrastrable:
| Event | Occurs When |
|---|---|
| ondrag | Se está arrastrando un elemento. |
| ondragstart | El usuario empezó a arrastrar el elemento. |
| ondragend | El usuario dejó de arrastrar el elemento. |
Nota: Al arrastrar un elemento, el evento ondrag se activa cada 350 milisegundos.
En el objetivo de caída:
| Evento | Ocurre cuando |
|---|---|
| ondragente | Un elemento arrastrado ingresa al destino de colocación |
| ondragleave | Un elemento arrastrado abandona el destino de colocación |
| ondragover | Un elemento arrastrado está sobre el destino de colocación |
| caer | Un elemento arrastrado se suelta sobre el objetivo. |
El objeto DragEvent
El objeto DragEvent maneja eventos que ocurren cuando se arrastran o sueltan elementos.
Arrastrar eventos
| Event | Ocurre cuando |
|---|---|
| ondrag | Se está arrastrando un elemento. |
| ondragend | Una usuario ha terminado de arrastrar un elemento. |
| ondragenter | Un elemento arrastrado ingresa al destino de colocación. |
| ondragleave | Un elemento arrastrado abandona el destino de colocación. |
| ondragover | Un elemento arrastrado está sobre el destino de colocación. |
| ondragstart | Una usuario comienza a arrastrar un elemento. |
| ondrop | Un elemento arrastrado se suelta sobre el objetivo. |
Propiedades de arrastre de evento
| Property | Returns |
|---|---|
| dataTransfer | The data that is dragged or dropped |
Propiedades y métodos heredados
DragEvent hereda todas las propiedades y métodos de:
propiedad de evento de destino
Ejemplos
Obtenga el elemento donde ocurrió el evento:
const element = event.target;Obtenga el nombre del elemento donde ocurrió el evento:
let text = event.target.tagName;Más ejemplos a continuación.
Descripción
La targetpropiedad devuelve el elemento donde ocurrió el evento .
La targetpropiedad es de solo lectura.
La targetpropiedad devuelve el elemento en el que ocurrió el evento, a diferencia de la currentTargetpropiedad, que devuelve el elemento cuyo detector de eventos desencadenó el evento.
Ver también:
Propiedad de evento currentTarget
Ejemplo
Obtenga el elemento que desencadenó el evento:
const element = event.currentTarget;Obtenga el nombre del elemento que desencadenó el evento:
let text = event.currentTarget.tagName;Descripción
La currentTargetpropiedad devuelve el elemento cuyo detector de eventos desencadenó el evento.
La currentTargetpropiedad es de solo lectura.
La currentTargetpropiedad es útil durante la captura y el burbujeo.
La currenttargetpropiedad se refiere al elemento cuyo detector de eventos desencadenó el evento, a diferencia de la target propiedad, que devuelve el elemento que desencadenó el evento.
Sintaxis
event.currentTarget
Detalles técnicos
| Valor de retorno: | Un objeto. El objeto cuyos detectores de eventos desencadenaron el evento. |
|---|---|
| Versión DOM: | Eventos DOM Nivel 2. |
Más ejemplos
Ejemplo
Obtenga el elemento donde ocurrió el evento:
const element = event.target;Ejemplo
Obtenga el nombre del elemento donde ocurrió el evento:
let text = event.target.tagName;Sintaxis
event.target
Detalles técnicos
| Valor de retorno: | Un objeto. El objeto donde ocurrió originalmente el evento. |
|---|---|
| Versión DOM: | Eventos DOM Nivel 2. |
Más ejemplos
Ejemplo
Obtenga el elemento que desencadenó el evento:
const element = event.currentTarget;Ejemplo
Obtenga el nombre del elemento que desencadenó el evento:
let text = event.currentTarget.tagName;