Utilizando como ejemplo la clasificación de 4 pokémons
Drag and Drop con HTML5 y Javascript
Como usar Javascript para crear la función
Empezar
utilizaremos drag and drop (arrastrar y soltar) para tomar un elemento y llevarlo a una locación diferente.
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir a CodePen
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
En este tutorial utilizaremos drag and drop (arrastrar y soltar) para tomar un elemento y llevarlo a una locación diferente, utilizando como ejemplo la clasificación de 4 pokémons. Para esto utilizaremos HTML5.
Puedes probarlo aqui
10
Ve al proyecto sin terminar:
https://codepen.io/playcode_edu/pen/abQrVPr
Agrega las imagenes segun el proyecto que tengas en mente. Recuerda que tengan fondo transparente, asi pueden tener una terminación mas prolija
10
Al elemento “container”, mediante CSS asignamos un ancho y alto, con las propiedad margin centramos el elemento y añadimos un borde para poder visualizarlo
10
En el elemento de la clase padre asignamos un ancho y alto, usaremos flexbox para gestionar el flujo de los elementos clase “tipo”. Los cuales llevarán la propiedad de flex-grow con el valor de 1. Flex-grow define una proporción de los elementos dentro del contenedor.
10
Finalizamos asignando colores de fondo a cada uno de los tipos para su identificación como de tipo fuego y de tipo agua.
10
Definimos como queremos que se vea el resultado.
10
Le asignamos un ancho y alto específicos a nuestras imagenes, e incluimos un margen para separarlos de los demás elementos. Para identificar que estas imágenes pueden ser arrastradas agregamos el valor de move a la propiedad cursor.
10
En Javascript
Busca el comentario //Aqui haces la llamada al método y añade este código para decirle que los elementos no pueden ser soltados en cualquier lado, para esto se realiza una llamada al método event.preventDefault () .
10
Arrastrar y Soltar
Erica De Pacheco
Created on September 23, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Business Proposal
View
Project Roadmap Timeline
View
Step-by-Step Timeline: How to Develop an Idea
View
Artificial Intelligence History Timeline
View
Mobile Phone Call
View
Momentum: Tools Tutorial
View
Momentum: Onboarding Video
Explore all templates
Transcript
Utilizando como ejemplo la clasificación de 4 pokémons
Drag and Drop con HTML5 y Javascript
Como usar Javascript para crear la función
Empezar
utilizaremos drag and drop (arrastrar y soltar) para tomar un elemento y llevarlo a una locación diferente.
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir a CodePen
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
En este tutorial utilizaremos drag and drop (arrastrar y soltar) para tomar un elemento y llevarlo a una locación diferente, utilizando como ejemplo la clasificación de 4 pokémons. Para esto utilizaremos HTML5.
Puedes probarlo aqui
10
Ve al proyecto sin terminar:
https://codepen.io/playcode_edu/pen/abQrVPr
Agrega las imagenes segun el proyecto que tengas en mente. Recuerda que tengan fondo transparente, asi pueden tener una terminación mas prolija
10
Al elemento “container”, mediante CSS asignamos un ancho y alto, con las propiedad margin centramos el elemento y añadimos un borde para poder visualizarlo
10
En el elemento de la clase padre asignamos un ancho y alto, usaremos flexbox para gestionar el flujo de los elementos clase “tipo”. Los cuales llevarán la propiedad de flex-grow con el valor de 1. Flex-grow define una proporción de los elementos dentro del contenedor.
10
Finalizamos asignando colores de fondo a cada uno de los tipos para su identificación como de tipo fuego y de tipo agua.
10
Definimos como queremos que se vea el resultado.
10
Le asignamos un ancho y alto específicos a nuestras imagenes, e incluimos un margen para separarlos de los demás elementos. Para identificar que estas imágenes pueden ser arrastradas agregamos el valor de move a la propiedad cursor.
10
En Javascript
Busca el comentario //Aqui haces la llamada al método y añade este código para decirle que los elementos no pueden ser soltados en cualquier lado, para esto se realiza una llamada al método event.preventDefault () .
10