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

Question

我搜索了几天没有真正的结果,也许有人可以帮助我.

我的页面上有一个div(可以包含图像,文本区域,其他),它可拖动和可调整大小(感谢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
$('<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
        });
    }
});