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

Continuando con el contenido de API’s de HTML5 hoy veremos el uso de Drag and Drop (Arrastrar y soltar).

Drag and Drop nos permite tomar un elemento y arrastrarlo a una localización diferente, en HTML5 cualquier elemento puede ser draggable (arrastrable).

En la siguiente aplicación, clasificaremos 4 pokemones según su tipo (fuego o agua), esto mientras aprendemos los múltiples eventos que nos permite realizar drag and drop. 

Iniciamos creando un elemento section con un id de “container”, dentro de este section un contenedor de clase “padre” que tendrá como hijos a dos divisiones para clasificar a los pokemones de tipo fuego y de tipo agua. Adicionalmente un elemento “resultado”, fuera del elemento section en el cual mostraremos el estado de la aplicación.

  

    
    
 
  

...

Al elemento “container”, mediante CSS asignamos un ancho y alto, con las propiedad margin centramos el elemento y añadimos un borde par poder visualizarlo.

#container {
  width: 580px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid black;
  text-align: center;
}

En el elemento de la clase padre asignamos un ancho y alto, usaremos flexbox para gestionar el flujo de los elementos hijos de la 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.

.padre {  
  width: 580px;
  height: 120px;
  display: flex;
}

.tipo {
 flex-grow: 1;
}

Finalizamos asignando colores de fondo a cada uno de los tipos para su identificación como de tipo fuego y de tipo agua.

#fuego {
 background-color: #ffd54c;
}

#agua {
  background-color: #42ccff;
}

Ahora agregamos las imágenes de 4 pokémons con la clase "pokemon".

En CSS asignamos un ancho y alto específicos, e incluimos un margen para separarlos de los demás elementos.

.pokemon {
  margin: 10px;
  height: 80px;
  width: 80px;
}

Para que un elemento sea draggable, se declara el atributo draggable con valor de "true".

Para identificar que estas imágenes pueden ser arrastradas agregamos el valor de move a la propiedad cursor.

.pokemon{
 cursor: move;
}

Luego se especifica qué debe suceder cuando el elemento es arrastrado, para esto se agrega el evento ondragstart que hara un llamado a la función drag(event).

Además se debe agregar un id específico para cada elemento draggable.

En javaScript declaramos la función drag que mediante el método dataTransfer.setData() se establece el tipo de dato y valor del elemento capturado, en este caso el valor del atributo id.

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

El evento ondragover especifica dónde los elementos arrastrados pueden ser soltados y añadidos. Por defecto los elementos no pueden ser soltados en otros elementos para permitir esto, se realiza una llamada al método event.preventDefault () para el evento ondragover.

Estos eventos serán agregados a la sección "container" y las divisiones de tipo.

function allowDrop(ev){
   ev.preventDefault();
}

Cuando un elemento es soltado en otro elemento se genera un evento llamado ondrop que hara un llamado a la funcion drop(event).

En la declaración de la función de JavaScript primero se llama al método preventDefault () para evitar la manipulación del navegador de los datos. Para obtener los datos del elemento arrastrado utilizamos el método dataTransfer.getData(). Este método método devolverá los datos que se establecieron del mismo tipo en setData (). Finalmente mediante appendChild agregamos el elemento arrastrado al elemento en el que se produjo el evento ondrop.

function drop(ev){
   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   ev.target.appendChild(document.getElementById(data));
}

Hasta este momento ya se puede movilizar las imagenes de pokemones por las diferentes divisiones de tipo.

Para saber si están bien clasificados, agregamos el atributo name con el tipo de cada pokemon.

Guardamos todos los elementos de la clase pokemon en una variable pokes.

var pokes = document.getElementsByClassName("pokemon");

Ahora compararemos el atributo name que poseen con el atributo id de su elemento contenedor, de cada uno de los elementos.

for(var i=0;i

Mediante una bandera verificamos si cada uno de los elementos se encuentra en correcta ubicación.

var correcto = 1;
for(var i=0;i

Si todos los elementos se encuentran clasificados correctamente, mediante innerHTML agregamos CORRECTO a la sección resultado, y si aun no estan estan ubicados agregamos INCOMPLETO.

if(correcto == 1){
   document.getElementById("resultado").innerHTML = "CORRECTO";
}else{
   document.getElementById("resultado").innerHTML = "INCOMPLETO";
}

Todo esto sera una función llamada testing que será llamada cada vez que un elemento es soltado.

function drop(ev){
  testing();
}

Recuerda también que en Devcode tenemos el curso de HTML y CSS, en el que podrás aprender los fundamentos de HTML y CSS totalmente gratis, además de encontrar muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios