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?

这是他们回答的工作小提琴

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

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

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

Answer 2

在if（isDragging）子句中：

var element = document.getElementById("rotatable");
var mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
var mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
var rect = element.getBoundingClientRect();
var s_rad = Math.atan2(
        mouseY - rect.top - rect.height / 2, 
        mouseX - rect.left - rect.width / 2
    );
var degree = Math.round(90 + (s_rad * (180 / (Math.PI))) / 15) * 15;
element.style.transform = 'rotate(' + degree + 'deg)';

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

2 个答案: