logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza: • 7. Drag & Drop
clase:daw:diw:2eval:tema07

−Tabla de Contenidos

¡Esta es una revisión vieja del documento!

7. Drag & Drop

API

Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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);
      }
 
 
      function onDrop(ev) {
        ev.preventDefault();
 
        var element=ev.target;
        var data = ev.dataTransfer.getData("text/plain");
 
 
        element.innerText=data;
      }
       
      function onDragOver(ev) {
        ev.preventDefault();
      }     
    </script>
  </head>
  <body>
 
    <p>Arrastra aquí la pieza a reparar:</p>
    <p class="destino" ondrop="onDrop(event)" ondragover="onDragOver(event)"></p>
 
    <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>
 
  </body>
</html>

  • 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í:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 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;
 }

¿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

Ejercicio 5

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 6

  • 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
  • Al arrastrar el icono de "Nº de Vuelos Despegados" sobre el icono de "La papelera" se decrementará en 1 el valor
  • Al arrastrar el icono de "Nº de Vuelos Aterrizados" sobre el icono de "La papelera" se decrementará en 1 el valor

Solución

clase/daw/diw/2eval/tema07.1609931709.txt.gz · Última modificación: 2021/01/06 12:15 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