logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:2eval:tema07

Diferencias

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

Enlace a la vista de comparación

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 [2021/01/06 11:54]
admin 		clase:daw:diw:2eval:tema07 [2021/01/06 12:34]
admin
Línea 1: Línea 1:
 ====== 7. Drag & Drop ====== ====== 7. Drag & Drop ======
 +El drag & drop es una forma de simplificar los interfaces de usuario.
  
   * Drag & Drop   * Drag & Drop
Línea 5: Línea 6:
     * [[http://interactjs.io/|interact.js: Bajo nivel]]     * [[http://interactjs.io/|interact.js: Bajo nivel]]
  
-    * [[http://www.w3schools.com/html/html5_draganddrop.asp|API de HTML 5]]+En el drag & drop siempre hay 2 elementos HTML que son: 
 +  * El elemento que se arrastra 
 +  * El elemento donde se suelta  
 + 
 +Respecto a los eventos , hay 3 eventos en un drag & drop: 
 +  * ''ondragstart'': Cuando se empieza a arrastrar 
 +  * ''ondragover'': Cuando se está sobre el elemento donde se quiere soltar (pero sin soltarlo) 
 +  * ''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. 
 + 
 +Mas información: 
 +    * [[http://www.w3schools.com/html/html5_draganddrop.asp|HTML Drag and Drop API]]
  
  
Línea 23: Línea 38:
     </style>     </style>
     <script>     <script>
-      function onDragOver(ev) { 
-        ev.preventDefault(); 
-      } 
  
       function onDragStart(ev) {       function onDragStart(ev) {
Línea 31: Línea 43:
         var data=element.innerText;         var data=element.innerText;
  
-        ev.dataTransfer.setData("text", data);+        ev.dataTransfer.setData("text/plain", data);
       }       }
 +
  
       function onDrop(ev) {       function onDrop(ev) {
Línea 38: Línea 51:
  
         var element=ev.target;         var element=ev.target;
-        var data = ev.dataTransfer.getData("text");+        var data = ev.dataTransfer.getData("text/plain");
  
  
         element.innerText=data;         element.innerText=data;
       }       }
 +      
 +      function onDragOver(ev) {
 +        ev.preventDefault();
 +      }      
     </script>     </script>
   </head>   </head>
   <body>   <body>
  
-    <p>Arrastra aquí el elemento a reparar:</p> +    <p>Arrastra aquí la pieza a reparar:</p>
     <p class="destino" ondrop="onDrop(event)" ondragover="onDragOver(event)"></p>     <p class="destino" ondrop="onDrop(event)" ondragover="onDragOver(event)"></p>
-    <br> 
  
     <ul>     <ul>
Línea 63: Línea 78:
 </sxh> </sxh>
  
 +  * 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.
 +
 +
 +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í:
 +
 +<sxh javascript>
 +  var dragData="";
 +
 +  function onDragOver(ev) {
 + ev.preventDefault();
 +  }
 +
 +  function onDragStart(ev) {
 + 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.
  
  
clase/daw/diw/2eval/tema07.txt · Última modificación: 2021/01/06 12:48 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki