Puzle Drag and Drop
Publicado por dm14 (1 intervención) el 01/03/2020 21:51:39
Hola, no consigo ver donde está el error.
Alguien me puede decir porque da error al soltar y se quedan las imagenes pequeñas?
Este sería el archivo css:
Alguien me puede decir porque da error al soltar y se quedan las imagenes pequeñas?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Actividad Puzzle</title>
<link rel="stylesheet" type="text/css" href="pocoyo.css">
<script>
function empezar(ev){
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Data", ev.target.id);
}function encima(ev){
var arrastrarID=ev.dataTransfer.getData("Data");
var contenedorID=ev.target.id;
if(arrastrarID.substring(1,2) == contenedorID.substring(1,2)) {
document.getElementById(contenedorID).style.background = '#CEF608';
ev.preventDefault();
} else {
document.getElementById(contenedorID).style.background = '#F78181';
} }function soltar(ev){
ev.preventDefault();
var arrastrarId=ev.dataTransfer.getData("Data");
console.log(ev.target);
ev.target.appendChild(document.getElementById(arrastrarId));
document.getElementById(arrastrarId).style.border='0px';
document.getElementById(arrastrarId).style.margin='0px';
document.getElementById(arrastrarId).style.width='204px';
document.getElementById(arrastrarId).style.height='204px';
}function abortar(ev) {
var contenedorID=ev.target.id;
document.getElementById(contenedorID).style.background="#808080";
}</script>
</head>
<body>
<div id="principal">
<h2>PUZZLE INFANTIL</h2>
<div id="imagenes">
<img id="i1" class="arrastrable" src="i1.jpg" alt="imagen 1" draggable="true" ondragstart="empezar(event)">
<img id="i2" class="arrastrable" src="i2.jpg" alt="imagen 2" draggable="true" ondragstart="empezar(event)">
<img id="i3" class="arrastrable" src="i3.jpg" alt="imagen 3" draggable="true" ondragstart="empezar(event)">
<img id="i4" class="arrastrable" src="i4.jpg" alt="imagen 4" draggable="true" ondragstart="empezar(event)">
<img id="i5" class="arrastrable" src="i5.jpg" alt="imagen 5" draggable="true" ondragstart="empezar(event)">
<img id="i6" class="arrastrable" src="i6.jpg" alt="imagen 6" draggable="true" ondragstart="empezar(event)">
</div>
<div id="contenedores">
<div id="p1" class="contenedor" ondragover="encima(event)" ondrop="soltar(event)" ondragleave="abortar(event)"></div>
<div id="p2" class="contenedor" ondragover="encima(event)" ondrop="soltar(event)" ondragleave="abortar(event)"></div>
<div id="p3" class="contenedor" ondragover="encima(event)" ondrop="soltar(event)" ondragleave="abortar(event)"></div>
<div id="p4" class="contenedor" ondragover="encima(event)" ondrop="soltar(event)" ondragleave="abortar(event)"></div>
<div id="p5" class="contenedor" ondragover="encima(event)" ondrop="soltar(event)" ondragleave="abortar(event)"></div>
<div id="p6" class="contenedor" ondragover="encima(event)" ondrop="soltar(event)" ondragleave="abortar(event)"></div>
</div>
</div>
</body>
</html>
Este sería el archivo css:
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
h2 { padding: 1em; margin: 0em;}#contenedores {display: inline-block;
margin: 1em;}#imagenes {display: inline-block;
}#principal {background-color: rgb(173, 159, 255);
border-radius: 1em;
text-align: center;
max-width: 650px;
margin: auto;}.arrastrable {
border: solid black;max-width: 80px;
max-height: 80px;
float: left; margin: 2px;}.contenedor {
float: left; width: 204px; height: 204px;opacity: 0.5;
background-color: #808080;
}Valora esta pregunta
0
