Estoy tratando de mover un elemento HTML (una pieza del rompecabezas) a su posición original en la pantalla después de un evento dragEnd, si el elemento no está dentro de una zona de destino específica.
Uso un objeto javascript para representar la pieza del rompecabezas. El objeto contiene la x y la y iniciales del elemento, así como una referencia al propio elemento (junto con alguna otra información). El código está debajo.
function dragEnd(e) { if(selectedPiece.ele.id === "correctPiece" && selectedPiece.distanceVector < 30){ window.alert("Game End"); } else{ console.log("returning piece: ", selectedPiece.ele.id); console.log("to point ", selectedPiece.startX, selectedPiece.startY); selectedPiece.ele.style.position = "absolute"; selectedPiece.ele.style.left = selectedPiece.startX; selectedPiece.ele.style.top = selectedPiece.startY; } active = false; }Aún así, cuando dejo caer la pieza, se queda donde se dejó caer.
Cuando miro la consola, muestra la identificación del elemento e identifica las propiedades startX y startY correctas. También intenté agregar "px" a startX y startY sin suerte.
Cualquier ayuda apreciada gracias :)
He intentado codificar los valores y las piezas terminan moviéndose pero no a la posición x, y que se ha codificado.
Entonces, prueba esto:
selectedPiece.ele.style.left = selectedPiece.startX + "px"; selectedPiece.ele.style.top = selectedPiece.startY + "px";pero no a la posición x,y que ha sido codificada
En segundo lugar, asegúrese de comprender cómo funciona CSS absolute . Del artículo de MDN :
El elemento absolutamente posicionado se posiciona en relación con su ancestro posicionado más cercano (es decir, el ancestro más cercano que no es estático).
Intente hacer que la posición del padre inmediato del elemento arrastrado sea relative .