Arrastrar y soltar HTML5 más fácil: Cómo crear objetos HTML5 que se pueden arrastrar

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:

Ejemplo

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:

Ejemplo

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():

Ejemplo

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.

Compatibilidad con el navegador

Chrome

46+

Edge

Todos

Firefox

3.5+

IE

10+

Opera

Todos

Safari

3.1+

Navegador móvil soporte

Chrome

Firefox

Todos

Opera

Safari

Leave a Reply

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *