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

在拖动时更新位置

1 个答案: