jQuery - CSS - Rotate Div by drag mouse event

Question

Hi,

I'm searching since a few day without real result, maybe someone can help me here.

I've a div on my page (can containt an image, a text area, other), it's draggable and resizable (thanks to jQuery UI), and i want to make it "rotatable", with a handle in a corner to drag and rotate it using css transform (-wekbit-transform, moz-transform)

Is it possible ? with jQuery or other Javascript ?

Actually i don't care of compatibility with IE.

Thanks in advance, Regards

Answer 1

well this should work. It as a poor rotating logic, but that is on you :)

$(function(){
   var lastPos = 0, rotate = 0, isMouseDown = false;
   $('#test').bind('mousedown', function(e){
       isMouseDown = true;
   }).bind('mouseup', function(){
       isMouseDown = false;
   }).bind('mousemove', function(e){
       if(isMouseDown){
           if(e.pageX > lastPos)
              rotate+=4;
           else 
              rotate-=4;

           lastPos = e.pageX;
           this.style.webkitTransform = this.style.MozTransform  = "rotate(" + rotate + "deg)";
       }
   });
});​

updated

http://www.jsfiddle.net/qbDKN/8/

Answer 2

Using jQuery UI's original drag events:

$('selector').draggable({
  drag: function(event, ui){
    var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

    $(this).css({
      '-moz-transform': rotateCSS,
      '-webkit-transform': rotateCSS
    });
  }
});

The problem is that your question is slightly unclear about how the conflict about the two behaviors (when you drag the object both rotates and moves around) that arise from this is handled. This one just let the left-right movement of the mouse determine how much to rotate, while the default drag behavior (movement) still exists.

Edit:

I suppose this is a little hackish but it will work:

// Your original element
var ele = $('#selector');

// Create handle dynamically
$('<div></div>').appendTo(ele).attr('id','handle').css({
    'position': 'absolute',
    'bottom': 5,
    'right': 5,
    'height': 10,
    'width': 10,
    'background-color': 'orange'
});

ele.css('position', 'relative');

$('#handle').draggable({
    handle: '#handle',
    opacity: 0.01, 
    helper: 'clone',
    drag: function(event, ui){
        var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

        $(this).parent().css({
            '-moz-transform': rotateCSS,
            '-webkit-transform': rotateCSS
        });
    }
});

Answer 3

Question:

Sorry for addind this as answer bse i couldn't as comment. I am working on the same scenario for last two days and its eating my brain. If anyone completed this rotatin the image after dropping by mouse events please respond.

Thanks