javascript - 如何使用 jQuery 拖动时旋转元素？

Question

我正在创建一个带有旋转轮的网站。用户应该能够通过用鼠标拖动来旋转该轮子。我在 jQuery 中实现了这个并且它可以工作(旋转)。但它在 90 度到 180 度之间的表现与预期一致。当它旋转超过或小于这个范围时，我会看到一些意想不到的反弹。

这是我的代码:

$(document).ready(function(){
    var isDragging = false;

    $("#box").mousemove(function(e){
        if(isDragging){
            e.preventDefault();

            var rx = $(this).width() / 2;
            var ry = $(this).height() / 2;

            var px = e.clientX - $(this).offset().left - rx;
            var py = e.clientY - $(this).offset().top - ry;

            var a = Math.atan2(py,px) * 180 / Math.PI + 90;

            if(py <= 0 && px < 0){a = 360 + a;}

            $(this).css("-webkit-transform","rotate(" + a + "deg)");
        }
    });

    $("#box").mousedown(function(){
        isDragging = true;
    });

    $("*").mouseup(function(){
        isDragging = false;
    });
});

有什么问题吗？怎么解决？

Answer 1

您应该查看此处发布的答案。

How to make object rotate with drag, how to get a rotate point around the origin use sin or cos?

这是他们答案中的工作 fiddle

http://jsfiddle.net/mgibsonbr/tBgLh/11/

它涉及使您的 html 看起来与此类似。

<div class="draggable_wp">
  <div class="el"></div>
  <div class="handle"></div>
</div>