Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:2eval:tema07 [2021/01/06 12:34]
admin
+++ clase:daw:diw:2eval:tema07 [2021/01/06 12:48] (actual)
admin [Ejercicios]
@@ Línea 2: / Línea 2: @@
 El drag & drop es una forma de simplificar los interfaces de usuario.
-  * Drag & Drop
-    * [[https://bevacqua.github.io/dragula/|Dragula: Alto nivel]]
-    * [[http://interactjs.io/|interact.js: Bajo nivel]]
 En el drag & drop siempre hay 2 elementos HTML que son:
@@ Línea 21: / Línea 18: @@
 Mas información:
     * [[http://www.w3schools.com/html/html5_draganddrop.asp|HTML Drag and Drop API]]
+    * [[https://bevacqua.github.io/dragula/|Dragula: Librería de Drag & Drop de Alto Nivel]]
+    * [[http://interactjs.io/|interact.js: Librería de Drag & Drop de Bajo Nivel]]
 ===== API =====
@@ Línea 129: / Línea 127: @@
 ===== Ejercicios =====
+==== Ejercicio 1 ====
+En base al ejemplo del tema, prueba a arrastrar el texto a otra aplicación como el Bloc de Notas de Windows. ¿Ha funcionado?
-==== Ejercicio 5 ====
+Ahora modifica el ejemplo y en vez de usar ''dataTransfer'' usa una variable de JavaScript y  vuelve a arrastrar el texto a otra aplicación como el Bloc de Notas de Windows. ¿Ha funcionado?. Explica que ha ocurrido
-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 2 ====
+En base al ejemplo del tema, modifica que en vez de guardarse el texto del elemento, se guarde un JSON similar al siguiente:
+<sxh json>
+{
+  color: "#FF0000",
+  texto: "Disco duro"
+}
+</sxh>
-==== Ejercicio 6 ====
+Y al soltar que en el elemento ''<p>'', se muestre la propiedad ''texto'' del JSON y que sea del colo de la propiedad ''color'' del JSON.
-{{ :clase:modulos:daw:dif:vuelos.png?600 |}}
+==== Ejercicio 3 ====
+Haz un programa similar al siguiente:
+{{:clase:daw:diw:2eval:vuelos.png|}}
+De forma que:
   * 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
@@ Línea 149: / Línea 156: @@
   * Al arrastrar el icono de "Nº de Vuelos Aterrizados" sobre el icono de "La papelera" se decrementará en 1 el valor
-{{:clase:modulos:daw:dif:drag_drop_vuelos.html.zip|Solución}}
+Ademas, cambiar todo el aspecto visual para que "quede bonito". Vamos a suponer que la página se usa en la torre de control de una aeropuerto como Castellón y se usa para ir controlando cuantos aviones van despegando y aterrizando.

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página