Detección de eventos de halar y/o soltar mediante puntero de mouse
Su interfaz principal es DragEvent, que agrupa todos los eventos y propiedades para seleccionar y mover un elemento en pantalla. Este permite la selección desde puntero de mouse sobre un elemento en pantalla; su arrastre (drag) y la acción de soltar (drop). Otro importante interface vinculado a halar/soltar es MouseEvent. Los siete eventos disponibles son:
- dragstart (primer toque táctil sobre lo halado)
- drag (halando el elemento)
- dragenter (lo halado ingresa en un área de recepción para ser soltado)
- dragleave (lo halado se aleja del área de recepción )
- dragover (lo halado 'sobrevuela' el área de recepción)
- drop (lo halado es soltado sobre el área receptora)
- dragend (lo halado ha sido soltado, o se ha dejado de halar el elemento)
Evento dragstart
Inicia creando datos de ubicación (x,-x) (y,-y) al primer toque y deslizamiento del elemento halable (draggable).
No olvidar la sintaxis de las útiles plantillas literales:
-
`textoA ${variable}, textoB ${variable}`;
En el siguiente ejemplo solo se alertará al evento 'drag' para que ejecute la lectura (mediante coordenadas) de la posición del elemento halable. Ya que ningún otro evento de halar/soltar será invocado, el elemento halable no 'caerá' en ningún área definida.
Solo admite interacción de puntero de mouseLa sintaxis usada para alertar solamente al evento 'drag':
En Javascript
// Mediante EventListener
elementoActivador.addEventListener("drag", (ObjetoEvento) => {
// llamado a código
});
Evento drag
Abajo, se activa cuando el elemento halable está siendo halado mediante interacción táctil o de puntero. En el ejemplo de abajo se activa también el evento dragend para devolver el elemento a su estado inicial. Así mismo, ya que no se activa ningún otro evento, el elemento hablable solo se posará encima de su área inicial.
Evento dragenter
Abajo, es un evento indirecto del proceso de halar/soltar. Esto es, el evento dragenter se activa cuando el elemento halable 'entra o sobrevuela' sobre un área definida como repositoria del elemento. Por lo que es común que se utilice en combinación con otros eventos. En este caso, se aplicaron eventos drag|enter|leave|over. Pero no hay evento para definir el área de reposo del elemento halable.
Evento dragleave
Abajo, el evento se activa cuando el elemento halable ha 'rozado' el área repostorio pero también se ha alejado de ella.
Este evento es similar a dragover. La diferencia es que dragover se activa solo cuando el elemento halable se halla justo encima del área repositoria. Mientras que dragleave se activa cuando el elemento halable tocó y se aleja del elemento repositorio.
A manera de resumen, en el siguiente ejemplo se activan los siguientes eventos:
- Evento
"drag": alerta que el elemento halable está siendo halado. - Evento
"dragend": alerta que el elemento halable ha sido soltado en ubicación indefinida (dentro o fuera del repositorio). - Evento
"dragover": alerta que el elemento halable 'sobrevuelva' el repositorio, pero aún no ha sido soltado sobre él. - Evento
"dragenter": elemento halable tocó el área repositoria. - Evento
"dragleave": alerta que elemento halable se aleja del repostorio. - Evento
"drop": alerta que el elemento halable fue desclickeado encima del repositorio.
Además, dentro de cada eventListener se añadió una condicional que evalua la presencia del nombre de una clase. Y así, tomar una ruta de ejecución. Es decir, la condicional entrará a TRUE solo si el objeto evento (que contiene datos del evento) acceda mediante tarjet(que apunta al elemento halable) al nombre de la clase del elemento halable y verifique si el nombre 'nombreClase' es la clase actual. Si ese nombre no es el actual, el código no se ejecutará y seguirá con las siguientes líneas de código.
En Javascript
//Entra aquí cuando el evento es ejecutado
elemento.addEventListener("nombreEventoAPI", (evento) => {
// classList.contains verifica si la clase existe
if (evento.target.classList.contains("nombreClase")) {
// Y entra acá si la condición es true
// código
}
});
Finalmente en el ejemplo de abajo se muestra la activación del resto de eventos mediante puntero de mouse: dragover, drop y
dragend.
Un desafío al usar API para un solo tipo de evento (o solo puntero de mouse o solo táctil) es que se necesitará más código para que ambos eventos sean reconocidos como activadores de interacción.
Una API que se estudiará es la de Pointer events. Esta reconoce interacciones duales para clics (dedo o mouse). Pero como complemento se estudiará en la siguiente sección otro métodos para que los eventos drag&drop sean reconocidos por tu mouse o por tu dedo en pantalla.
Objeto DragEvent para interacción de halar y soltar (drag&drop)
En lenguajes de programación todo objeto contiene las propiedades, eventos, propiedades y métodos (o funciones) para fortalecer sus ejecuciones.
Aquí se revisará el objeto DragEvent y sus eventos disponibles para interacción de arrastre y soltado de elementos en pantalla (son iguales a los eventos de la API drag&drop).
- ondrag | ondragend | ondragenter | ondragleave | ondragover | ondragstart | ondrop
Más importante aún, se revisará primero el objeto dataTransfer; importante para que el sistema capte con exactitud las características de cada evento drag&drop.
Objeto dataTransfer
Captura y mantiene en memoria los datos de las propiedades de uno o más objetos que están siendo halados (o dragueados, un sustantivo feo que me inventé) mediante interacción en pantalla.
Como todo objeto, dataTransfer contiene su propio instanciador o constructor de objeto, sus propiedades y sus métodos. Los enlistaré y los estudiaremos poco a poco.
- Constructor
-
DataTransfer() - Propiedades de instancia
-
DataTransfer .dropEffect -
DataTransfer .effectAllowed -
DataTransfer .files -
DataTransfer .items -
DataTransfer .types - Métodos de instancia
-
DataTransfer .clearData() -
DataTransfer .getData() -
DataTransfer .setData() -
DataTransfer .setDragImage()