正在更新位置上拖動

Question

我正在嘗試使用JavaScript/jQuery創建原始裁剪工具。我有一個固定尺寸的HTML元素，overflow:hidden用作我的畫布。用戶應該能夠在該元素內拖動圖像，以在裁剪邊界內將圖像定位到他們喜歡的位置。

我在計算正確的偏移量時遇到了一些麻煩。

我已經設置了的jsfiddle這裏：http://jsfiddle.net/YtyFH/

我有麻煩的是部分：

if (drag) { 
    $img.css({ 
     top: e.offsetY - this.offsetTop, 
     left: e.pageX - this.offsetLeft 
    }); 
} 

目前，當用戶開始在畫布裏面拖，邊緣圖像捕捉到光標位置。我希望圖像從已經存在的位置開始移動。

Answer 1

這是一個可能的修復方法。請參閱Updated Fiddle

var $img = $this.find('img'); 
var offset = { 
    left : $img.css('left') == 'auto' ? e.pageX : e.pageX - parseInt($img.css('left')), 
    top : $img.css('top') == 'auto' ? e.pageY : e.pageY - parseInt($img.css('top')) 
} 

$this.on('mousemove', function (e) { 
    if (drag) { 
     $img.css({ 
     top: e.pageY - offset.top, 
     left: e.pageX - offset.left 
     }); 
    } 
})