Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa Próxima revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:2eval:tema07 [2020/12/03 12:53] admin |
clase:daw:diw:2eval:tema07 [2021/01/06 12:34] admin |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | ====== 7. Contenido interactivo | + | ====== 7. Drag & Drop ====== |
+ | El drag & drop es una forma de simplificar los interfaces de usuario. | ||
+ | * Drag & Drop | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
- | * [[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:// | ||
- | ==== Drag and drop ==== | ||
- | * [[http:// | + | ===== API ===== |
+ | Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo | ||
- | * [[https:// | + | <sxh html> |
- | ==== Transformaciones ==== | + | < |
+ | < | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | width: 350px; | ||
+ | | ||
+ | border: 1px solid #aaaaaa; | ||
+ | } | ||
+ | </ | ||
+ | < | ||
+ | function onDragStart(ev) { | ||
+ | var element=ev.target; | ||
+ | var data=element.innerText; | ||
+ | ev.dataTransfer.setData(" | ||
+ | } | ||
- | * [[http:// | ||
- | * matrix(n, | ||
- | * translate(x, | ||
- | * translateX(n) | ||
- | * translateY(n) | ||
- | * scale(x,y) | ||
- | * 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:// | + | function onDrop(ev) { |
- | * [[https:// | + | ev.preventDefault(); |
- | * [[https:// | + | |
- | ==== Animaciones ==== | + | var element=ev.target; |
+ | var data = ev.dataTransfer.getData(" | ||
- | * [[http:// | ||
- | * @keyframes | ||
- | * animation-name: | ||
- | * animation-duration: | ||
- | * animation-delay: | ||
- | * animation-iteration-count: | ||
- | * animation-direction: | ||
- | * animation-timing-function: | ||
- | * [[https:// | ||
- | * animation-fill-mode: | ||
- | * animation: La unión de todas las de antes | ||
- | * [[https:// | + | element.innerText=data; |
+ | } | ||
+ | |||
+ | function onDragOver(ev) { | ||
+ | ev.preventDefault(); | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | < | ||
- | | + | |
- | * {{animacionescss.zip|Ejemplo de animación de alas de mariposa}} | + | <p class=" |
- | * [[https:// | + | |
- | * [[https:// | + | |
- | * [[https:// | + | |
- | * [[https:// | + | |
+ | <ul> | ||
+ | <li draggable=" | ||
+ | <li draggable=" | ||
+ | <li draggable=" | ||
+ | <li draggable=" | ||
+ | </ul> | ||
- | ===== Material complementario ===== | + | </body> |
- | * Drag & Drop | + | </html> |
- | * [[https:// | + | </sxh> |
- | * [[http:// | + | |
- | * Animaciones | + | |
- | * [[https:// | + | |
- | * [[https:// | + | |
- | * [[https:// | + | |
- | ===== Ejercicios ===== | + | * Atributo '' |
+ | * Evento '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * Evento '' | ||
+ | * Evento '' | ||
+ | * '' | ||
+ | * '' | ||
+ | ===== dataTransfer ===== | ||
+ | El objeto '' | ||
- | ==== Ejercicio 1 ==== | ||
- | Crea un programa en JavaScript+HTML+CSS que un rectángulo rojo vaya modificando el ancho desde lo 100px a los 600px y que tarde 4 segundos | ||
+ | Para guardar el dato, se usa: | ||
+ | ev.dataTransfer.setData(" | ||
+ | Para obtener el dato, se usa: | ||
+ | var data = ev.dataTransfer.getData(" | ||
+ | | ||
+ | | ||
+ | Sin embargo , podemos pensar que no es muy útil ya que se podría usar directamente una variable de JavaScript. En ese caso vamos a usar una variable global llamada '' | ||
- | ==== Ejercicio 2 ==== | + | <sxh javascript> |
- | 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. | + | var dragData=""; |
- | ==== Ejercicio 3 ==== | + | function onDragOver(ev) { |
- | Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón | + | ev.preventDefault(); |
+ | } | ||
- | ==== Ejercicio 4 ==== | + | function onDragStart(ev) { |
- | Modifica el anterior ejercicio para que se haga grande al pulsar | + | var element=ev.target; |
+ | dragData=element.innerText; | ||
+ | } | ||
+ | |||
+ | function onDrop(ev) { | ||
+ | ev.preventDefault(); | ||
+ | |||
+ | var element=ev.target; | ||
+ | |||
+ | element.innerText=dragData; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ¿cual es la diferencia entre usar '' | ||
+ | |||
+ | Sin embargo la ventaja de usar la variable es que podemos almacenar mas cosas que un simple texto. | ||
+ | |||
+ | |||
+ | |||
+ | ===== Ejercicios ===== | ||