移動圖像，Y座標

Question

我有以下代碼：

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

圖像不動的。我console.log兩個偏移量，他們打印輸出正確。

謝謝！

Answer 1

您正在將top和left的值設置爲一個函數。當代碼執行時，這將被評估一次。如果你想要player移動，你想在你的mousedown偵聽器中執行該代碼。

Answer 2

你應該在MouseDown事件中應用此CSS：

$(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