單擊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函數返回元素的最左側和最頂層相對位置。 它與元素的邊界無關。

關於偏移的示例圖像

由於您的中心沒有變化，您可以在功能之外進行計算並在之后使用它。 你可以像https://jsfiddle.net/o5jjosvu/65/這樣做。

如果要移動元素，請在此時更改中心位置。