JavaScript - Puzle Drag and Drop

 
Vista:

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?


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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder