Muestra las diferencias entre dos versiones de la página.
Próxima revisión | Revisión previa | ||
clase:daw:diw:2eval:tema07 [2020/09/08 18:37] 127.0.0.1 editor externo |
clase:daw:diw:2eval:tema07 [2021/01/06 12:48] (actual) admin [Ejercicios] |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | ====== 7. Contenido interactivo | + | ====== 7. Drag & Drop ====== |
+ | El drag & drop es una forma de simplificar los interfaces de usuario. | ||
- | * [[https:// | + | En el drag & drop siempre hay 2 elementos HTML que son: |
+ | * El elemento que se arrastra | ||
+ | * El elemento donde se suelta | ||
- | * Drag & Drop | + | Respecto a los eventos , hay 3 eventos en un drag & drop: |
- | * Transformaciones | + | * '' |
- | * Transiciones | + | * '' |
- | * Animaciones | + | * '' |
+ | Por último está: | ||
+ | * La propiedad '' | ||
+ | * El objeto de JavaScript '' | ||
- | ===== Material ===== | + | Mas información: |
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
- | ==== Drag and drop ==== | + | ===== API ===== |
+ | Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo | ||
- | * [[http:// | + | <sxh html> |
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | .destino { | ||
+ | width: 350px; | ||
+ | height: 70px; | ||
+ | border: 1px solid #aaaaaa; | ||
+ | } | ||
+ | </style> | ||
+ | < | ||
- | + | function onDragStart(ev) { | |
- | ==== Transformaciones ==== | + | var element=ev.target; |
+ | var data=element.innerText; | ||
+ | ev.dataTransfer.setData(" | ||
+ | } | ||
- | * [[http:// | + | function onDrop(ev) { |
- | * matrix(n,n,n,n,n,n) | + | ev.preventDefault(); |
- | * translate(x, | + | |
- | * translateX(n) | + | |
- | * translateY(n) | + | |
- | * scale(x, | + | |
- | * scaleX(n) | + | |
- | * scaleY(n) | + | |
- | * rotate(angle) | + | |
- | * skew(x-angle, | + | |
- | * skewX(angle) | + | |
- | * skewY(angle) | + | |
- | * [[http:// | + | |
- | * matrix3d(n, | + | |
- | * translate3d(x, | + | |
- | * translateX(x) | + | |
- | * translateY(y) | + | |
- | * translateZ(z) | + | |
- | * scale3d(x, | + | |
- | * scaleX(x) | + | |
- | * scaleY(y) | + | |
- | * scaleZ(z) | + | |
- | * rotate3d(x, | + | |
- | * rotateX(angle) | + | |
- | * rotateY(angle) | + | |
- | * rotateZ(angle) | + | |
- | * perspective(n) | + | |
- | ==== Transiciones ==== | + | |
- | * [[http:// | + | var element=ev.target; |
- | * [[https:// | + | var data = ev.dataTransfer.getData(" |
- | * [[https:// | + | |
- | ==== Animaciones ==== | ||
- | * [[http:// | + | element.innerText=data; |
- | | + | |
- | | + | |
- | | + | |
- | * animation-delay: | + | ev.preventDefault(); |
- | * animation-iteration-count: | + | |
- | * animation-direction: | + | </script> |
- | * animation-timing-function: | + | </head> |
- | * [[https://cubic-bezier.com/ | + | |
- | * animation-fill-mode: | + | |
- | * animation: La unión de todas las de antes | + | |
- | | + | |
+ | <p class=" | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | * [[https:// | + | </ul> |
+ | </ | ||
+ | </ | ||
+ | </ | ||
- | ===== Material complementario ===== | + | * Atributo '' |
- | * Drag & Drop | + | * Evento '' |
- | * [[https://bevacqua.github.io/ | + | * '' |
- | * [[http:// | + | * '' |
- | * Animaciones | + | * Evento '' |
- | * [[https://www.sitepoint.com/ | + | * Evento '' |
- | * [[https:// | + | * '' |
- | * [[https:// | + | * '' |
- | ===== Ejercicios | + | ===== dataTransfer |
+ | El objeto '' | ||
- | ==== Ejercicio 1 ==== | + | Para guardar el dato, se usa: |
- | Crea un programa en JavaScript+HTML+CSS | + | ev.dataTransfer.setData(" |
+ | Para obtener el dato, se usa: | ||
+ | var data = ev.dataTransfer.getData(" | ||
+ | |||
+ | |||
+ | Sin embargo , podemos pensar | ||
+ | <sxh javascript> | ||
+ | var dragData=""; | ||
- | ==== Ejercicio 2 ==== | + | function onDragOver(ev) { |
- | Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos. | + | ev.preventDefault(); |
+ | } | ||
- | ==== Ejercicio 3 ==== | + | function onDragStart(ev) { |
- | Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón | + | var element=ev.target; |
+ | dragData=element.innerText; | ||
+ | } | ||
- | ==== Ejercicio 4 ==== | + | function onDrop(ev) { |
- | Modifica el anterior ejercicio para que se haga grande al pulsar el botón pero si lo vuelves a pulsar que se haga otra vez pequeño | + | ev.preventDefault(); |
+ | var element=ev.target; | ||
- | ==== Ejercicio 5 ==== | + | element.innerText=dragData; |
- | 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 | + | ¿cual es la diferencia entre usar '' |
- | ==== Ejercicio 6 ==== | + | Sin embargo la ventaja de usar la variable es que podemos almacenar mas cosas que un simple texto. |
- | {{ : | ||
+ | ===== 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? | ||
+ | |||
+ | Ahora modifica el ejemplo y en vez de usar '' | ||
+ | |||
+ | |||
+ | ==== 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: "# | ||
+ | texto: "Disco duro" | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Y al soltar que en el elemento ''< | ||
+ | |||
+ | |||
+ | ==== Ejercicio 3 ==== | ||
+ | Haz un programa similar al siguiente: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | De forma que: | ||
* Al arrastrar el icono de " | * Al arrastrar el icono de " | ||
* Al arrastrar el icono de " | * Al arrastrar el icono de " | ||
Línea 123: | Línea 156: | ||
* Al arrastrar el icono de "Nº de Vuelos Aterrizados" | * Al arrastrar el icono de "Nº de Vuelos Aterrizados" | ||
- | {{: | + | Ademas, cambiar todo el aspecto visual para que "quede bonito" |
- | + | ||