TL; DR – La API de arrastrar y soltar HTML5 le permite agarre un objeto HTML con el cursor y arrástrelo a otro lugar.
¿Qué se puede arrastrar y soltar en HTML5?
HTML5 le permite hacer que cualquier elemento sea arrastrable, permitiéndole tomarlo con el cursor y arrastrarlo a una ubicación diferente que se define como un elemento soltable. En el siguiente ejemplo, intente arrastrar una imagen a un cuadrado:
Esta funcionalidad simplifica la experiencia del usuario e incluso permite crear juegos en línea simples (por ejemplo, puede arrastrar y soltar piezas de ajedrez virtuales). Cuando arrastra un elemento, su réplica transparente se mueve junto con el cursor hasta que lo suelta soltando el botón del mouse.
Técnicamente, Arrastrar y soltar es una API de JavaScript agregada a HTML5. Por lo tanto, es importante tener al menos conocimientos básicos de secuencias de comandos para poder trabajar con esta funcionalidad.
Eventos para HTML5 Arrastrar y soltar
En la siguiente tabla, verá todos los eventos que son relevantes para la funcionalidad de arrastrar y soltar:
| Evento | Explicación |
|---|---|
| drag | El cursor se mueve mientras arrastra un elemento |
| soltar | El proceso de arrastre finaliza |
| dragstart | El cursor toma el elemento y comienza a arrastrar |
| dragend | Se suelta el botón del mouse, soltando el elemento |
| dragenter | El cursor entra en el elemento de destino |
| dragleave | El cursor abandona el elemento de destino |
| dragover | El cursor se mueve sobre el elemento de destino |
Explicación paso a paso de arrastrar y soltar
La codificación de arrastrar y soltar HTML5 parece bastante complicada a primera vista, ya que incluye secuencias de comandos en JS. Sin embargo, estudiemos cada parte del proceso para que sea más fácil de entender.
Elementos arrastrables
Primero, debe asegurarse de que el elemento que desea arrastrar tenga una Se aplicó el atributo HTML5 draggable y su valor se estableció en true:
Arrastrar
Luego, defina lo que debe suceder después de arrastrar un objeto. Puede hacerlo llamando un controlador de eventos para un evento dragstart y definir una función que se ejecutará.
El valor y el tipo de datos de los datos arrastrados deben ser establecidos por dataTransfer.setData() método:
Soltar
Los datos HTML5 que se pueden arrastrar se especifican adjuntando un controlador de eventos al evento dragover.
Los elementos y datos no se pueden soltado en otros elementos de forma predeterminada. Esto significa que debe detener el elemento «s comportamiento predeterminado utilizando el método event.preventDefault():
Un evento drop ocurre cuando se sueltan los datos HTML5 que se pueden arrastrar. Es llamado por el ondrop controlador de eventos:
El código final: un ejemplo
Básicamente, necesitas tu código para poder realice cuatro pasos:
- Evite la acción predeterminada del navegador web relacionada con los datos llamando a
preventDefault() - Obtenga los datos con el
dataTransfer.getData()método - Pegue el elemento arrastrado en el elemento para soltar
Veamos cómo funciona en el ejemplo a continuación:
Arrastrar y soltar HTML5: consejos útiles
- Puede arrastrar varios tipos de elementos, incluidos, entre otros, archivos, enlaces, imágenes y texto.
- También puede arrastrar varios elementos a la vez. Sin embargo, se recomienda tenerlos todos en el mismo formato para mantener la coherencia.
- Los elementos de formulario que aceptan la entrada del usuario pueden ser áreas que se pueden soltar por defecto.