jQuery - CSS - Rotate Div by drag mouse event

Question

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

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
        });
    }
});