CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropdraggable
user382538
user382538

Reputation:

jquery drag and rotate to angle

I am using jQuery UI to drag and drop an image. I also want to rotate the image 360 degrees so I can move and rotate it like in Photoshop. I am using the jQuery rotate plugin to rotate the image on click, but I want to select a corner and drag to rotate the image to any angle.

Live JS: http://jsfiddle.net/87jaR/

JavaScript code:

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

Upvotes: 9

Views: 21531

Answers (5)

Stan George
Stan George

Reputation: 92

I will leave this here in case someone else had the same issues I did:

The answers here are good but if you want it to work on mobile devices and IE <10, you need a library. It took me about 1 week to find it and it gets the job done.

library link

Upvotes: 2

dersimn
dersimn

Reputation: 875

I needed a similar function for a project, but mine also works on touch devices like the iPad or Android Tablets:

http://jsfiddle.net/C3tuD/46/

You need jQuery and a library for rotation which you can find here, then activate it via $("#ObjectToBeRotated").rotateAble();

Source Code:

$.fn.rotateAble = function() {
var offset = null;
var dragging = false;

var RotationTarget = $(this); // Save target, cause $(this) doesn't work from MouseUp and MouseMove

// Mouse
var MouseDown = function(e) {
    dragging = true;

    offset = {
        x: e.pageX,
        y: e.pageY
    };
    $("div#rotation").text("MouseDown");
};
var MouseUp = function() {
    dragging = false;
    $("div#rotation").text("MouseUp");
};
var MouseMove = function(e) {
    var mouse_x = e.pageX - offset.x;
    var mouse_y = e.pageY - offset.y;
    //$("div#rotation").text("Move: " + mouse_x + " " + mouse_y);
    if (dragging) {

        var radians = Math.atan2(mouse_x, mouse_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        RotationTarget.rotate(degree);

        //$("div#rotation").text(degree);
    }
};

// Touch
var TouchStart = function(e) {
    var orig = e.originalEvent;
    var pos = $(this).position();

    offset = {
        x: orig.changedTouches[0].pageX,
        y: orig.changedTouches[0].pageY
    };
};
var TouchMove = function(e) {
    e.preventDefault();
    var orig = e.originalEvent;

    var mouse_x = orig.changedTouches[0].pageX - offset.x;
    var mouse_y = orig.changedTouches[0].pageY - offset.y;

    var radians = Math.atan2(mouse_x, mouse_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    $(this).rotate(degree);
    //$("div#rotation").text(degree);
};

this.bind("touchstart", TouchStart);
this.bind("touchmove", TouchMove);
$(this).bind("mousedown", MouseDown);
$(document).bind("mouseup", MouseUp);
$(document).bind("mousemove", MouseMove);
};

Upvotes: 0

Prasanth K C
Prasanth K C

Reputation: 7332

Pls check with this one, 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) Here deg means degree, Either you can use rad for radians

2) You can change the rotating point by changing transform-origin

For Eg: transform-origin: 50% 50% will move the rotating point to center.

Upvotes: 14

fatlinesofcode
fatlinesofcode

Reputation: 1667

this works for me. http://plnkr.co/edit/xaCWl9Havv1ow7bhMTf2?p=preview

(function() {

    var RAD2DEG = 180 / Math.PI;            
    var dial = $("#box");
    dial.centerX = dial.offset().left + dial.width()/2;
    dial.centerY =  dial.offset().top + dial.height()/2;


    var offset, dragging=false;
    dial.mousedown(function(e) {
      dragging = true;
      offset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
    })
    $(document).mouseup(function() {
      dragging = false
    })
    $(document).mousemove(function(e) {
      if (dragging) { 

        var newOffset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
        var r = (offset - newOffset) * RAD2DEG;

        dial.css('-webkit-transform', 'rotate(' + r + 'deg)');
      }
    })
}());

Upvotes: 5

Mamoon ur Rasheed
Mamoon ur Rasheed

Reputation: 317

This is not possible in JavaScript to rotate at any angle. This is possible in IE as MS has implemented activeX control in IE for that purpose but not a cross browser solution.

Anyway If you still interested to invest your time, you can use SVG which is capable of any any sort of such task but still it has cross browser problems. IE6/7/8 does not have any SVG implemented even though u can use ChromeFrame google project to solve that problem or if you can find any SVG plugin for IE.

Upvotes: -13

Related Questions