用CSS轉換jQuery mousemove

Question

我想在屏幕中移動對象併爲該對象分配CSS規則。我想是這樣的：

var pos = {}; 
var isMoving = false; 
var zoomScale = 1; 

$(".box").on("mousedown", function(e) { 
    pos = { 
     x: e.pageX, 
     y: e.pageY 
    };  
    isMoving = true; 
}).on("mouseup", function(){ 
    isMoving = false; 
}).on("mousemove", function(e){  
    if (isMoving) { 
     $(".box").css({ 
      "transform": "translate(" + ((e.pageX - pos.x) * zoomScale) + "px, " + ((e.pageY - pos.y) * zoomScale) + "px)" 
     }); 
    } 
}); 

當我嘗試再次移動莫名其妙的物體移動一點上邊和左邊比我的預期。

Answer 1

var clicked = false; 
$(".box").mousedown(function(){ 
    clicked = true; 
}); 
$(".box").mousemove(function(event){ 
    if (clicked){ 
    $(".box").css({ 
       //whatever css here and you can use event.pageX, event.pageY 
       //to detech mouse position and event.clientX, event.clientY 
       }); 
    } 
}); 

更新::

var clicked = false; 
var pos = {}; 
var zoomScale = 1; 
$(".box").mouseup(function(event) { 
    console.log(clicked); 
    clicked = false; 
    pos = { 
    x: event.pageX, 
    y: event.pageY 
    }; 
}); 
$(".box").mousedown(function(event) { 
    clicked = true; 
    pos = { 
    x: event.pageX, 
    y: event.pageY 
    }; 
}); 
$(".box").mousemove(function(event) { 
    console.log(pos); 
    if (clicked) { 
    $(".box").css({ 
     "transform": "translate(" + ((event.pageX-($(".box").width()/2)) * zoomScale) + "px, " + ((event.pageY-($(".box").height()/2)) * zoomScale) + "px)" 
    }); 
    } 
}); 

CODEPEN