Moving element to specific css coordinates (top and left) not working using javascript

I am trying to move a HTML element (a puzzle piece) back to its original position on the screen after a dragEnd event, if the element is not inside a specified target zone.

I using a javascript object to represent the puzzle piece. The object contains the starting x and y for the element as well as a reference to the element itself (along with some other information). The code is below.

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;
}

Still when I drop the piece it stays wherever it was dropped.

When I look at the console it shows the element id and identifies the correct startX and startY properties. I have also tried appending “px” to the startX and startY with no luck.

Any help appreciated thanks 🙂