Herramientas de usuario
Barra lateral
clase:daw:diw:2eval:tema07
Tabla de Contenidos
¡Esta es una revisión vieja del documento!
7. Drag & Drop
- Drag & Drop
API
Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo
<!DOCTYPE HTML>
<html>
<head>
<style>
.destino {
width: 350px;
height: 70px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function onDragOver(ev) {
ev.preventDefault();
}
function onDragStart(ev) {
var element=ev.target;
var data=element.innerText;
ev.dataTransfer.setData("text", data);
}
function onDrop(ev) {
ev.preventDefault();
var element=ev.target;
var data = ev.dataTransfer.getData("text");
element.innerText=data;
}
</script>
</head>
<body>
<p>Arrastra aquí el elemento a reparar:</p>
<p class="destino" ondrop="onDrop(event)" ondragover="onDragOver(event)"></p>
<br>
<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>
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
clase/daw/diw/2eval/tema07.1609930475.txt.gz · Última modificación: 2021/01/06 11:54 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
