move image by pointing to the X, Y coordinates

Question

I have the following code:

var currX = 0;
var currY = 0;
var player = $('#player');
//Checks to see which key is pressed down
        $(window).on('mousedown', function(e) { 
            currX = e.offsetX;
            currY = e.offsetY;
            console.log(e.offsetX + ', ' + e.offsetY);
        });


        player.css({
            left: function(index,value) { return (value + currX + 'px'); },
            top: function(index,value) { return  (value + currY + 'px'); }
        });

The image doesn't move at all. I console.log out both the offsets and they get printed out correctly.

Thanks!

Answer 1

You're setting the value of top and left to a function. That will be evaluated once, when that code is executed. You want to execute that code inside your mousedown listener if that's when you want the player to move.

Answer 2

you should apply this css in the mousedown event :

$(window).on('mousedown', function (e) {
    currX = e.offsetX;
    currY = e.offsetY;
    console.log(e.offsetX + ', ' + e.offsetY);
    player.css({
        left: currX + 'px',
        top: currY + 'px'
    });
});

FIDDLE