Javascript 单击并拖动以旋转

Question

我正在尝试通过单击并拖动来旋转元素(例如表盘)。我已经掌握了基本概念，但它有点小问题。

请在此处查看我当前的示例:https://jsfiddle.net/o5jjosvu/

在元素内单击并拖动时，它会抖动。但是当光标位于元素外部时，它会平滑转换。

光标内部元素

光标外部元素

我认为问题是由于我处理事件的方式造成的，但我不确定。

$('.element').on('mousedown', function() {
    $(document).bind('mousemove', function() {
        // Calculate rotation
    });
});
$(document).on('mouseup', function() {
    $(document).unbind('mousemove');
});

任何帮助都会很好，谢谢。

Answer 1

Jquery offset 函数返回元素的最左边和最上面的相对位置。它与元素的边框无关。

example image about offset

由于您的中心没有改变，您可以在函数之外计算它并在之后使用它。你可以这样做 https://jsfiddle.net/o5jjosvu/65/ .

如果要移动元素，请更改当时的中心位置。