javascript - 拖动时更新位置

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

这是一个可能的修复。查看更新的小提琴

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