jquery - 浏览器中的用户可旋转元素

Question

我正在创建一些东西，要求最终用户使用他的鼠标移动对象、改变它们的大小并旋转对象。其中大部分可以使用类似 JqueryUI 的东西来实现 (here)除了旋转。我需要用户能够旋转对象。

一个选项是放置一个调整 CSS 转换属性的 slider ，但如果有一种更直观的方式(如 powerpoint/photoshop)来执行此操作，那就太好了。

有办法吗？

Answer 1

http://jsfiddle.net/avPf6/1/是另一种使用可拖动 handle 的解决方案。

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

$('#selector').draggable({});

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