Introducción
Arrastrar y soltar es una interacción de usuario común que puede encontrar en muchas interfaces gráficas de usuario.
Existen bibliotecas JavaScript preexistentes para agregar una función de arrastrar y soltar a su aplicación. Sin embargo, puede haber situaciones en las que una biblioteca no esté disponible o presente una sobrecarga o dependencia que su proyecto no necesita. En estas situaciones, el conocimiento de las API disponibles en los navegadores web modernos puede ofrecer soluciones alternativas.
La API HTML Drag and Drop se basa en el modelo de eventos DOM para obtener información sobre lo que se arrastra o suelta y para actualizar ese elemento al arrastrar o soltar. Con los controladores de eventos de JavaScript, puede convertir cualquier elemento en un elemento que se puede arrastrar o en un elemento en el que se puede soltar.
En este tutorial, crearemos un ejemplo de arrastrar y soltar usando HTML Drag and Drop API con JavaScript vanilla para usar los controladores de eventos.
Requisitos previos
Para completar este tutorial, necesitará:
- Un navegador web moderno que admita la API de arrastrar y soltar (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Paso 1: Creación del proyecto y marcado inicial
Nuestro proyecto consistirá en un contenedor con dos tipos de elementos secundarios:
- Elementos secundarios que puede arrastrar
- Elementos secundarios que pueden tener elementos soltados en ellos
Primero, abra la ventana de su terminal y cree un nuevo directorio de proyecto:
Luego, navegue hasta ese directorio:
Luego, cree un archivo index.html en ese directorio:
A continuación, agregue un código repetitivo para una página web HTML:
Y entre <body> etiquetas agregue su draggable elemento y su dropzone (destino de destino):
Guarde y cierre el archivo. Luego, cree un style.css archivo:
A continuación, agregue estilos para los elementos en nuestro index.html archivo:
Esto agregará algo de formato a la aplicación. Ahora puede ver index.html en el navegador y observar que esto produce un draggable <div> y a dropzone <div>.
A continuación, haremos explícitamente que el primer <div> se pueda arrastrar añadiendo el atributo draggable:
Guarde y cierre el archivo.
Finalmente, vea index.html en el navegador nuevamente. Si hacemos clic en draggable <div> y lo arrastramos por la pantalla, debería haber una indicación visual de que se está moviendo.
El valor predeterminado para el atributo draggable es auto. Eso significa que si el elemento se puede arrastrar será determinado por el comportamiento predeterminado de su navegador. Normalmente, esto significa que las selecciones de texto, las imágenes y los enlaces se pueden arrastrar sin especificar draggable="true".
Ahora tiene un archivo HTML con un elemento que se puede arrastrar. Pasaremos a agregar onevent controladores.
Paso 2: Manejo de eventos de arrastrar y soltar con JavaScript
Actualmente, si suelte el ratón mientras arrastra el elemento arrastrable, no pasa nada. Para activar una acción al arrastrar o soltar elementos DOM, necesitaremos utilizar la API de arrastrar y soltar:
-
ondragstart: este controlador de eventos se adjuntará a nuestro elementodraggabley se activará cuando se produzca undragstartevento. -
ondragover: este controlador de eventos se adjuntará a nuestro elementodropzoney se activará cuando se produzca un eventodragover. -
ondrop: este controlador de eventos también se adjuntará a nuestro elementodropzoney se activará cuando undropocurre el evento.
Nota: Hay ocho controladores de eventos en total: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart y ondrop. Para nuestro ejemplo, no los necesitaremos todos.
Primero, hagamos referencia a un nuevo archivo https://www.digitalocean.com/community/tutorials/script.js en nuestro index.html:
A continuación, cree un nuevo https://www.digitalocean.com/community/tutorials/script.js archivo:
El objeto DataTransfer mantendrá un registro de la información relacionada con el arrastre actual. Para actualizar nuestro elemento al arrastrar y soltar, necesitamos acceder directamente al objeto DataTransfer.Para hacer esto, podemos seleccionar la propiedad dataTransfer de la DragEvent del elemento DOM.
Nota: La DataTransfer El objeto técnicamente puede rastrear la información de varios elementos que se arrastran al mismo tiempo. En nuestro ejemplo, nos centraremos en arrastrar un elemento.
El método setData del objeto dataTransfer se puede utilizar para establecer la información del estado de arrastre para el elemento que se arrastra actualmente. Se necesitan dos parámetros:
- una cadena que declara el formato del segundo parámetro
- los datos reales que se transfieren
Nuestro objetivo es mover nuestro elemento draggable a un nuevo elemento padre. Necesitamos poder seleccionar nuestro elemento draggable con un id exclusivo. Podemos configurar el id del elemento arrastrado con el método setData para que se pueda usar más tarde.
Vamos a vuelva a visitar nuestro archivo https://www.digitalocean.com/community/tutorials/script.js y cree una nueva función para usar setData:
Nota: Según se informa, Internet Explorer 9 a 11 tiene problemas con el uso de "text/plain". El formato debe ser "text" para ese navegador.
Para actualizar el estilo CSS del elemento arrastrado, podemos acceder a sus estilos usando el evento DOM nuevamente y por configurando los estilos que queramos para currentTarget.
Agreguemos a nuestra función y cambiemos backgroundColor a yellow:
Nota: Cualquier estilo que cambie deberá actualizarse manualmente nuevamente al soltar si desea estilos de solo arrastrar. Si cambia algo cuando comienza a arrastrar, el elemento arrastrado mantendrá ese nuevo estilo a menos que lo vuelva a cambiar.
Ahora, tenemos nuestra función JavaScript para cuando comience a arrastrar.
Podemos agregar ondragstart al elemento draggable en index.html:
Ver index.html en su navegador. Si intenta arrastrar su elemento ahora, se aplicará el estilo declarado en nuestra función:
Sin embargo, no sucederá nada cuando suelta el clic.
El siguiente controlador de eventos que se activa en esta secuencia es ondragover.
El comportamiento de caída predeterminado para ciertos elementos DOM como <div> s en los navegadores normalmente no acepta soltar. Este comportamiento interceptará el comportamiento que estamos intentando implementar. Para asegurarnos de obtener el comportamiento de caída deseado, aplicaremos preventDefault.
Revisemos el archivo https://www.digitalocean.com/community/tutorials/script.js y cree una nueva función para usar preventDefault. Agregue este código al final del archivo:
Ahora, podemos agregar ondragover a nuestro elemento dropzone en index.html:
En este punto, todavía no hemos escrito un código que maneje la eliminación real. El controlador de eventos final activado en esta secuencia es ondrop.
Revisemos nuestro archivo https://www.digitalocean.com/community/tutorials/script.js y creemos una nueva función .
Podemos hacer referencia a los datos que guardamos anteriormente con el método dataTransfer del objeto setData. Usaremos el método getData del objeto dataTransfer. Los datos que establecimos fueron id, así que eso es lo que nos será devuelto:
Seleccione nuestro elemento draggable con el id que recuperamos:
Seleccione nuestro dropzone elemento:
Agregue nuestro draggable elemento al dropzone:
Restablece nuestro dataTransfer objeto:
Ahora, podemos agregar ondrop a nuestro elemento dropzone en index.html:
Una vez hecho esto, tenemos una función de arrastrar y soltar completada. Vea index.html en su navegador y arrastre el elemento draggable al dropzone.
Nuestro ejemplo maneja el escenario de un solo elemento que se puede arrastrar y un solo destino de colocación. Puede tener varios elementos que se pueden arrastrar, varios destinos de colocación y personalizarlos con todos los demás controladores de eventos de la API de arrastrar y soltar.
Paso 3: creación de un ejemplo avanzado con varios elementos que se pueden arrastrar
Aquí hay un ejemplo más de cómo podría utilizar esta API: una lista de tareas pendientes con tareas arrastrables desde las que puede moverse una "To-do" columna a una "Done" columna.
Para crear su propia lista de tareas, agregue más elementos arrastrables con id sa index.html:
Ver index.html en su navegador y arrastre los elementos de la columna Tareas pendientes a la columna Listo. Ha creado una aplicación de tareas pendientes y probado la funcionalidad.
Conclusión
En este artículo, creó una aplicación de tareas pendientes para explorar la funcionalidad de arrastrar y soltar que es disponible para los navegadores web modernos.
La API de arrastrar y soltar proporciona múltiples opciones para personalizar sus acciones más allá de arrastrar y soltar. Por ejemplo, puede actualizar el estilo CSS de sus elementos arrastrados. Además, en lugar de mover el elemento, puede optar por copiar el elemento que se puede arrastrar para que se replique al soltarlo.
Tenga en cuenta que, si bien muchos navegadores web admiten esta tecnología, es posible que no pueda confiar en él si su audiencia consiste en dispositivos que no son compatibles con esta funcionalidad.
Para obtener más información sobre todo lo que puede soltar con la API de arrastrar y soltar, consulte los documentos de MDN.