jQuery – CSS – 通过拖动鼠标事件旋转Div

我正在寻找几天没有真正的结果，也许有人可以帮助我。

我的页面上有一个div（可以包含图像，文本区域，其他），它是可拖动的和可resize的（感谢jQuery UI），我想让它“可旋转”，在一个角落拖动手柄并使用css变换（-wekbit-transform，moz-transform）旋转它

可能吗 ？ 用jQuery或其他Javascript？

其实我不关心与IE的兼容性。

提前谢谢，问候

Answer 1

使用jQuery UI的原始拖动事件：

$('selector').draggable({ drag: function(event, ui){ var rotateCSS = 'rotate(' + ui.position.left + 'deg)'; $(this).css({ '-moz-transform': rotateCSS, '-webkit-transform': rotateCSS }); } }); 

问题是你的问题稍微不清楚是如何处理由此引起的两个行为（当你拖动对象既旋转又四处移动）的冲突。 这个只是让鼠标的左右移动决定旋转多少，而默认的拖动行为（移动）仍然存在。

编辑：

我想这有点hackish但它会工作：

 // Your original element var ele = $('#selector'); // Create handle dynamically $('
').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 }); } });