7. Contenido interactivo

Drag & Drop

Dragula: Alto nivel

interact.js: Bajo nivel

API de HTML 5

Ejercicio 5

Crea un programa en JavaScript+HTML+CSS de un puzzle. En la parte superior estarán las 4 imágenes del puzzle sin colocar. En la parte imferior, habrá un cuadro con los 4 huecos a colocar.

Separa todo lo que puedas la parte visual de la lógica del puzzle

Para ello crea una clase Puzzle que no contenga nada de parte visual.

Ejercicio 6

Al arrastrar el icono de "Avión despegando" sobre el texto de "Nº de Vuelos Despegados" se incrementará en 1 el valor

Al arrastrar el icono de "Avión aterrizando" sobre el texto de "Nº de Vuelos Aterrizados" se incrementará en 1 el valor

Al arrastrar el icono de "Nº de Vuelos Despegados" sobre el icono de "La papelera" se decrementará en 1 el valor

Al arrastrar el icono de "Nº de Vuelos Aterrizados" sobre el icono de "La papelera" se decrementará en 1 el valor

Solución