Question

我在拖动鼠标时试图让旋转轮旋转。轮子由3个部分组成，因此我独立地映射每个图像，以便定位我想要旋转的轮子部分。现在它工作得很好。唯一的问题是我使用event.clientX作为旋转参数，它有时可能是随机的，有时轮子在开始时移动到一个随机角度，但大多数情况下它都有效。我想要一个公式来为我的脚本提供更好的旋转参数。这是我目前的代码：

var isDragging      = false;

var innerWheelActive    = false;
var middleWheelActive   = false;
var outerWheelActive    = false;

$(document).ready(function() {



    /*------------------------------------------*/

    $("#mapping map #middleArea").mousedown(function() {
            isDragging  = true;
            middleWheelActive   = true;

            return false;
    });

    $("#mapping map #innerArea").mousedown(function() {
            isDragging  = true;
            innerWheelActive    = true;

            return false;
    });

    $("#mapping map #outerArea").mousedown(function() {
            isDragging  = true;
            outerWheelActive    = true;

            return false;
    });

    $(document).mousemove(function(event) {
        if (isDragging) {       

            var rotateCSS = 'rotate(' + event.clientX + 'deg)';
            if(innerWheelActive)
                $('#innerWheel img').css({ '-webkit-transform': rotateCSS });
            else if(middleWheelActive)
                $('#middleWheel img').css({ '-webkit-transform': rotateCSS });
            else if(outerWheelActive)
                $('#outerWheel img').css({ '-webkit-transform': rotateCSS });

            return false;
        }
    });

    $(document).mouseup(function() {
        if (isDragging){
            console.log('stopped');
            isDragging  = false;
            innerWheelActive    = false;
            middleWheelActive   = false;
            outerWheelActive    = false;
            return false;
        }
    });

});

Answer 1

尝试在回调函数中添加event.preventDefault和event.stopPorpagation：

$('img').draggable({
    drag: function(event, ui){
        var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
        $(this).css({ '-webkit-transform': rotateCSS });
        event.preventDefault();
        event.stopPropagation();
    }
});

Answer 2

你的逻辑有一个问题，它只依赖于x坐标，当旋转东西时它并不总是增加。

试试这个。它计算我的鼠标从初始点移动的距离，从而考虑x和y坐标。它应该工作正常。

function getDistance(x1,y1,x2,y2){
    return Math.sqrt((x1-x2) * (x1-x2) + (y2-y1) * (y2-y1));
}
var div = $("#mydiv");
var rotation = 0; 
var isDragging = false;
div.mousedown(function(event) {
    isDragging = true;
    lastX = event.clientX;
    lastY = event.clientY;
}).mouseup(function(event) {
    isDragging = false;
}).mousemove(function(event) {
    if (isDragging) {
        var curX = event.clientX;
        var curY = event.clientY;   
        rotation += getDistance(curX,curY,lastX,lastY); 
        var rotateCSS = 'rotate(' + rotation + 'deg)';
        $(this).css({
            '-webkit-transform': rotateCSS
        });  
        lastX = curX;
        lastY = curY;
    }
})

Demo

Javascript在鼠标向下拖动时旋转

2 个答案: