JavaScript es uno de los lenguajes de programación más populares, potenciado con más de 24 frameworks y alrededor de 84 librerías. Es el único lenguaje de programación soportado intrínsecamente por todos los navegadores. Además, el lenguaje admite tipado dinámico y es excelente para el renderizado y la animación. Puedes aprovechar JavaScript para añadir comportamiento interactivo en el front-end, controlar el backend, crear aplicaciones web y móviles, y más. La opción de añadir efectos a cualquier sitio web y hacerlo personalizable convierte a este lenguaje en uno de los favoritos de los desarrolladores a nivel mundial.
En esta guía, te guiaremos a través de los pasos para crear elementos de arrastrar y soltar utilizando Vanilla JavaScript puro. Además, daremos un paso más allá y crearemos una aplicación de “Planificador Matutino” utilizando los API de Arrastrar y Soltar de HTML controladores de eventos.
Requisitos previos
Para seguir este tutorial, debes tener:
Paso 1: Crear un nuevo proyecto
Comienza creando un contenedor con dos elementos hijos. Utilizaremos el primer elemento hijo para arrastrar y el segundo elemento hijo para almacenar los elementos arrastrados.
|
Nota: En este tutorial, trataremos los contenedores como un almacén para guardar todos los elementos arrastrados. En pocas palabras, todos los elementos arrastrados desde el primer hijo se soltarán en el segundo hijo. |
|
1 |
$ mkdir drag-and-drop-demo |
A continuación, utiliza el comando cd para cambiar el directorio a la carpeta drag-and-drop-demo :
|
1 |
$ cd drag-and-drop-demo |
Paso 2: Configuración inicial
En este tutorial, crearemos archivos HTML, CSS y JavaScript y los conectaremos. Primero, nombra los archivos como index.html, styles.css, y scripts.js respectivamente.
A continuación, añade el título “Mi Planificador Matutino” en el archivo index.html :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Mi Planificador Matutino</title> </head> <body> </body> </html> |
A continuación, vincula el CSS y añade JavaScript a HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Mi Planificador Matutino</title> </head> <body> </body> </html> |
A continuación, añade las siguientes líneas de código en las <body> etiquetas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Mi Planificador Matutino</title> </head> <body> <div class="container"> <h1><center>MI PLANIFICADOR MATUTINO</center></h1> <h2 class="draggable" draggable="true">Ir al gimnasio</h2> <h2 class="draggable" draggable="true">Leer durante 30 minutos</h2> <h2 class="draggable" draggable="true">Preparar avena</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Tomar una ducha fría</h2> <h2 class="draggable" draggable="true">Comenzar mi día</h2> </div> </body> </html> |
Guarda y cierra el archivo index.html. Después de eso, intenta abrir el archivo index.html en tu navegador y verás que se abre una página:
A continuación, vamos a dar estilo a nuestro index.html usando CSS para que se vea presentable.
Paso 3: Dar estilo usando CSS
A continuación, añade estilos a todos los elementos que hemos incluido en nuestro index.html archivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
Intenta abrir el archivo index.html en tu navegador y mira el resultado:
Aunque hemos completado la estructuración y añadido estilos, los elementos siguen siendo estáticos. Eso significa que no podemos mover ni desplazar los elementos hasta que les añadamos funciones dinámicas. En el siguiente paso, daremos la bienvenida a JavaScript y a los comportamientos dinámicos.
Paso 4: Introducción a JavaScript
En este paso, introduciremos JavaScript y haremos que todos los elementos de arrastre sean funcionales. En el archivo JS, establece los elementos que vamos a necesitar. Definamos draggable y containers para arrastrar y soltar elementos respectivamente.
Agrega las dos líneas de código en el archivo scripts.js :
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
A continuación, configura todos los escuchas de eventos. Comienza agregando el elemento “dragstart” como el primer escucha de eventos para add a la lista de clases. De manera similar, agrega el elemento “dragend” como el segundo escucha de eventos para remove de la lista de clases.
Adjunta los siguientes EventListeners en tu archivo scripts.js :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
A continuación, agrega el “dragover” EventListener para pasar el cursor y mover nuestros elementos. Establece el elemento draggable actual usando querySelector y luego añade el elemento arrastrable al contenedor actual:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Por defecto, soltar dentro de un elemento está deshabilitado. Usa e.preventDefault para habilitarlo:
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
A continuación, crea un elemento para determinar la posición del mouse. Comienza creando una función getDragAfterElement que tomará dos parámetros. El primero será un container y el segundo parámetro y se encargará de la posición vertical del mouse. Ahora, usa la función querySelectorAll para obtener nuestros elementos arrastrables. Define draggableElements para todos los elementos arrastrables dentro del contenedor:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
A continuación, llama a una función reduce que recorrerá la lista de elementos arrastrables y también especificará el elemento único después del cursor del mouse. A continuación, return devuelve la función reduce agregando el primer elemento como closest y el segundo como un child. Además, iguala el offset y agrega condiciones.
Agrega las siguientes líneas de código en el scripts.js archivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
Incluye esto en el scripts.js archivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
Ahora tenemos la configuración necesaria lista. Abre tu navegador y ejecuta index.html en tu navegador. Verás la página “My Morning Scheduler” con opciones para arrastrar y soltar. La línea blanca en el medio actúa como un puente para diferenciar entre las tareas ya realizadas y las que aún están por hacerse:
Conclusión
Arrastrar y soltar es una excelente opción para usar en los sitios web modernos. En esta guía, hemos utilizado un puñado de controladores de eventos para que el tutorial sea fácil para los principiantes. Hay ocho controladores de eventos en total y te animamos a usarlos a medida que avances. Una vez que te sientas cómodo usando las funciones y el código utilizado en este tutorial, puedes profundizar más en temas de JavaScript como jQuery y comenzar a explorar. También puedes intentar crear una aplicación de tareas pendientes, un rastreador de progreso semanal utilizando las funciones de fecha y hora de JavaScript, y otras aplicaciones utilizando los conceptos que acabas de aprender.
Para aprender más sobre JavaScript y temas de desarrollo web, consulta estos recursos de nuestro blog:
- Herramientas de JavaScript: localStorage y sessionStorage
- Trabajando con JavaScript: Qué son los objetos
- Un tutorial sobre cómo trabajar con JSON en JavaScript
- Trabajar con JavaScript: cómo funcionan las clases
¡Feliz computación!
Comentarios
Aún no hay comentarios. Sea el primero.