Diferencias

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

--- 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: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://bevacqua.github.io/dragula/|Dragula: Alto nivel]]
+    * [[http://interactjs.io/|interact.js: Bajo nivel]]
-  * [[https://css-tricks.com/ground-rules-for-web-animations/|Ground Rules for Web Animations]]: Reglas para cuando usar animaciones
+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
+  * ''ondragstart'': Cuando se empieza a arrastrar
-  * Transiciones
+  * ''ondragover'': Cuando se está sobre el elemento donde se quiere soltar (pero sin soltarlo)
-  * Animaciones
+  * ''ondrop'': Cuando se suelta.
+Por último está:
+  * La propiedad ''draggable'' que indica si un elemento se puede arrastrar
+  * El objeto de JavaScript ''dataTransfer'' que es donde se almacena lo que que se está arrastrando.
-===== Material =====
+Mas información:
+    * [[http://www.w3schools.com/html/html5_draganddrop.asp|HTML Drag and Drop API]]
-==== Drag and drop ====
-    * [[http://www.w3schools.com/html/html5_draganddrop.asp|API de HTML 5]]
+===== API =====
+Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo
+<sxh html>
-==== Transformaciones ====
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      .destino {
+        width: 350px;
+        height: 70px;
+        border: 1px solid #aaaaaa;
+      }
+    </style>
+    <script>
+      function onDragStart(ev) {
+        var element=ev.target;
+        var data=element.innerText;
+        ev.dataTransfer.setData("text/plain", data);
+      }
-    * [[http://www.w3schools.com/css/css3_2dtransforms.asp|Transformaciones 2D]]
-      * matrix(n,n,n,n,n,n)
-      * translate(x,y)
-      * translateX(n)
-      * translateY(n)
-      * scale(x,y)
-      * scaleX(n)
-      * scaleY(n)
-      * rotate(angle)
-      * skew(x-angle,y-angle)
-      * skewX(angle)
-      * skewY(angle)
-    * [[http://www.w3schools.com/css/css3_3dtransforms.asp|Transformaciones 3D]]
-      * matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
-      * translate3d(x,y,z)
-      * translateX(x)
-      * translateY(y)
-      * translateZ(z)
-      * scale3d(x,y,z)
-      * scaleX(x)
-      * scaleY(y)
-      * scaleZ(z)
-      * rotate3d(x,y,z,angle)
-      * rotateX(angle)
-      * rotateY(angle)
-      * rotateZ(angle)
-      * perspective(n)
-==== Transiciones ====
-    * [[http://www.w3schools.com/css/css3_transitions.asp|CSS3 Transitions]]
+      function onDrop(ev) {
-    * [[https://www.kirupa.com/html5/css3_animations_vs_transitions.htm|CSS3: Animations vs. Transitions]]
+        ev.preventDefault();
-    * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]]
-==== Animaciones ====
+        var element=ev.target;
+        var data = ev.dataTransfer.getData("text/plain");
-    * [[http://www.w3schools.com/css/css3_animations.asp|CSS3 Animations]]
-      * @keyframes
-      * animation-name: Nombre
-      * animation-duration: Duración en segundos.
-      * animation-delay: Retraso en empezar
-      * animation-iteration-count: Nª de repeticiones
-      * animation-direction: Si va desde el principio al final o al revés, etc. {normal,reverse,alternate,alternate-reverse}
-      * animation-timing-function: El progreso. {ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)}
-        * [[https://cubic-bezier.com/|cubic-bezier]]: Genera tu propia función
-      * animation-fill-mode: Que CSS se aplica cuando acaba. {none,forwards,backwards,both}
-      * animation: La unión de todas las de antes
-    * [[https://www.w3schools.com/jsref/met_win_settimeout.asp|Timeout]]
+        element.innerText=data;
+      }
+      function onDragOver(ev) {
+        ev.preventDefault();
+      }
+    </script>
+  </head>
+  <body>
-    * Ejemplos:
+    <p>Arrastra aquí la pieza a reparar:</p>
-      * {{animacionescss.zip|Ejemplo de animación de alas de mariposa}}
+    <p class="destino" ondrop="onDrop(event)" ondragover="onDragOver(event)"></p>
-      * [[https://codepen.io/YusukeNakaya/full/YLPVER|404]]
-      * [[https://codepen.io/Wujek_Greg/pen/KRXYpg|Reloj]]
-      * [[https://codepen.io/YusukeNakaya/pen/rJxevm|Escaleras]]
-      * [[https://codepen.io/miocene/pen/WJRXVg|Cuadros animados]]
+    <ul>
+      <li draggable="true" ondragstart="onDragStart(event)">Disco duro</li>
+      <li draggable="true" ondragstart="onDragStart(event)">Procesador</li>
+      <li draggable="true" ondragstart="onDragStart(event)">Memoria RAM</li>
+      <li draggable="true" ondragstart="onDragStart(event)">Placa base</li>
+    </ul>
-===== Material complementario =====
+  </body>
-  * Drag & Drop
+</html>
-    * [[https://bevacqua.github.io/dragula/|Dragula: Alto nivel]]
+</sxh>
-    * [[http://interactjs.io/|interact.js: Bajo nivel]]
-  * Animaciones
-    * [[https://www.sitepoint.com/top-9-animation-libraries-use-2016/|Top 9 Animation Libraries to Use in 2016]]
-    * [[https://daneden.github.io/animate.css/|Animate.css]]
-    * [[https://minimamente.com/example/magic_animations/|Magic Animations]]
-===== Ejercicios =====
+  * Atributo ''draggable="true"'' : Permite que ese elemento sea //arrastable//
+  * Evento ''ondragstart'': Función que se ejecuta al empezar a arrastrar el elemento.
+    * ''ev.target'': Obtenemos el elemento que se está arrastrando.
+    * ''ev.dataTransfer.setData("text", data);'': Guardamos la información de lo que se está arrastrando.
+  * Evento ''ondragover'': Se ejecuta cuando hay algo arrastrándose sobre él , pero aun no se ha soltado. Se usa para indicar si se puede soltar sobre él. En caso de que si se pueda, habrá que llamar a la función ''ev.preventDefault();''
+  * Evento ''ondrop'': Se ejecuta cuando se ha soltado el elemento sobre él.
+    * ''ev.target'': Elemento donde se ha soltado
+    * ''ev.dataTransfer.getData("text")'': Obtenemos la información de lo que se estaba arrastrando.
+===== dataTransfer =====
+El objeto ''dataTransfer'' es donde se almacena lo que que se está arrastrando.
-==== 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("text/plain", data);
+Para obtener el dato, se usa:
+  var data = ev.dataTransfer.getData("text/plain");
+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 ''data'' y el código quedaría así:
-==== 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 el botón pero si lo vuelves a pulsar que se haga otra vez pequeño
+	var element=ev.target;
+	dragData=element.innerText;
+  }
+  function onDrop(ev) {
+	ev.preventDefault();
+	var element=ev.target;
+	element.innerText=dragData;
+  }
+</sxh>
+¿cual es la diferencia entre usar ''dataTransfer'' y una variable de JavaScript ''dragData''?. Pues que usando ''dataTransfer'' podemos hacer el Drag & Drop entre aplicaciones y con la variable no podemos hacer eso.
+Sin embargo la ventaja de usar la variable es que podemos almacenar mas cosas que un simple texto.
+===== Ejercicios =====

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página