jQuery拖动并旋转到角度

我正在使用jQuery UI拖放图像。我还想将图像旋转360度，这样就可以像在Photoshop中一样移动和旋转它。我使用jQuery rotate plugin在单击时旋转图像，但是我想选择一个角并拖动以将图像旋转到任何角度。

实时JS:http://jsfiddle.net/87jaR/

JavaScript代码:

var test = 5;
$(function()
{
    $('#rotate').draggable({ containment: 'frame' });
    $('#frame img').live('mousedown', function(event)
    {
        test = test + 15;
        $(this).rotate({ angle: test });
    });
});

最佳答案

请检查这个， fiddle http://jsfiddle.net/prasanthkc/frz8J/

var dragging = false

$(function() {
var target = $('#target')
target.mousedown(function() {
    dragging = true
})
$(document).mouseup(function() {
    dragging = false
})
$(document).mousemove(function(e) {
    if (dragging) {

        var mouse_x = e.pageX;
        var mouse_y = e.pageY;
        var radians = Math.atan2(mouse_x - 10, mouse_y - 10);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        target.css('-moz-transform', 'rotate(' + degree + 'deg)');
        target.css('-moz-transform-origin', '0% 40%');
        target.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        target.css('-webkit-transform-origin', '0% 40%');
        target.css('-o-transform', 'rotate(' + degree + 'deg)');
        target.css('-o-transform-origin', '0% 40%');
        target.css('-ms-transform', 'rotate(' + degree + 'deg)');
        target.css('-ms-transform-origin', '0% 40%');
    }
})

})

1)此处 deg 表示 degree和，您都可以将 rad 用于 radians
2)您可以通过更改 transform-origin来更改旋转点

例如::transform-origin: 50% 50%将旋转点移到中心。