a vueltas con javascript. Poltergeist en esta práctica

[akualung]

Hola, compis. El otro dia hice un pequeño chorra-juego de puzzle en un seminario que estoy haciendo de desarrollo web, etc.

Es una cosa muy sencilla, En la parte de arriba hay 12 capas que son donde el jugador va colocando las piezas, a la derecha está la imagen entera a modo de guía y un pequeño dropdown para cambiar de puzzle (tres en total) y abajo se cargan de forma aleatoria las piezas. Solo hemos de ir arrastrando las piezas a su sitio correcto en la cuadrícula de arriba. No sale ningún mensaje cuando ganas, ni hay puntuación ni nada, es así de cutre xDDD

Me va todo más o menos bien, excepto la función "restaurar", que lo que hace es, si nos hemos equivocado en alguna de las piezas, quitarla de la cuadrícula y llevarla otra vez abajo cuando picas sobre ella (lo que hace es que desaparece de la casilla pero no vuelve a aparecer entre las de abajo). Además no me sale ningún error por consola ni nada que pueda dar alguna pista.

El problema lo arreglé duplicando un código que tenía en otra función (es la función que tiene el mismo nombre que la otra pero que el código es más largo y la he deshabilitado para que se ejecute la que falla), pero me he quedado con la "cosica" de saber por qué no funciona, porque en teoría no encuentro ningún fallo en el código.

Me lo he estado mirando y remirando, y poniendo montones de alerts para debugar, etc, pero no encuentro lógica a lo que pasa. Si alguien se quiere pelear un ratillo con esta función y ver si adivina qué puede estar pasando...

Aquí está el código: http://cfg1977.260mb.org/puzzle/puzzle.html

PD: Igual tarda un poco en cargar las imágenes al cambiar de puzzle.

Gracias muchas.

[anibarro]

Puede que no funcione porque estas añadiendo y eliminando el mismo nodo, prueba clonandolo y añadiendo el clon:

function restaurar(e) {
var casilla = document.getElementById(e.target.id);
var casillaClone = casilla.cloneNode(true);

if(casilla.parentNode.className === "pieza") {
var contPiezas = document.getElementById('contPiezas');
contPiezas.appendChild(casillaClone);
casilla.parentNode.removeChild(casilla);
}
}

[akualung]

Puede que no funcione porque estas añadiendo y eliminando el mismo nodo, prueba clonandolo y añadiendo el clon:

function restaurar(e) {
var casilla = document.getElementById(e.target.id);
var casillaClone = casilla.cloneNode(true);

if(casilla.parentNode.className === "pieza") {
var contPiezas = document.getElementById('contPiezas');
contPiezas.appendChild(casillaClone);
casilla.parentNode.removeChild(casilla);
}
}

Pues sí, era eso, no se cómo no me he dado cuenta. Supongo que me debía pensar que al hacer un appendChild se "duplicaba" el nodo y no es así. Después de clonar he tenido que añadirle otra vez los listeners de los eventos dragstart y dragend al nuevo nodo, porque parece ser que la clonación no añade los que el original tuviese asociados.

Muchas gracias, anibarro :brindis:



PD: acabo de ver que debido al comportamiento del appendChild (si es un nodo que ya existía en la página, lo "mueve" al otro elemento), no hace falta clonar el nodo sino que la función puede quedar así:



function restaurar(e) {

var img = document.getElementById(e.target.id);

if(img.parentNode.className === "pieza") {
var contPiezas = document.getElementById('contPiezas');
contPiezas.appendChild(img);
img.addEventListener('dragstart',arrastrar, false);
img.addEventListener("dragend", arrastrarFin, false);
}
}


(Le he cambiado el nombre a 'casilla' por 'img', me parecía más explicativo). Eso sí, al hacer el appendChild, la imagen vuelve a perder los listeners y se los he de volver a añadir, no entiendo por qué pasa eso. Quizá los listeners están ligados al nodo usando la ruta completa de éste dentro del DOM, y quizá al cambiarlo, pues los listeners se pierden.

[anibarro]

No hay nada como entender lo que pasa, gracias por compartirlo ;)