根据鼠标移动拖动图像

Question

我想根据鼠标移动拖动图像。问题是每当拖动开始时，图像的顶部和左侧位置会随着鼠标位置突然改变。

启动时不应突然移动到鼠标位置。我希望它感觉像是正常的拖动，但每当我开始移动鼠标时，位置都在变化。

var mousedown = false;
var p;
var x=0,y=0;
var flag1 = 0;

$("#blue3").mousedown(function(){
    if(mousedown) {
        mousedown = false;
        console.log("mouse down is true");
    } else {
        mousedown = true;
        console.log("mouse down is true");
    }

});  

$("#blue3").mouseup(function(){
    if(mousedown) {
        mousedown = true;
        console.log("mouse down is false");
    } else {
        flag1 = 1;
        x = p.left;
        y = p.top;
        mousedown = false;
        console.log("mouse down is false");
    }

}); 

$("#blue3").mousemove(function(event) {
    p = $("#blue3").position();

    if(mousedown) {   
        console.log("mouse left" + event.pageX);
        console.log("image left" + p.left);
        console.log("mouse top" + event.pageY);
        console.log("ima top" + p.top);

        $("#blue3").css({"left" : event.pageX, "top" : event.pageY });
        $("#blue").css({"left" : event.pageX, "top" : event.pageY});    
    }

});