jQuery - CSS - 通过拖动鼠标事件旋转Div [英] jQuery - CSS - Rotate Div by drag mouse event

问题描述

我在搜索，因为几天没有真正的结果，也许有人可以帮助我这里。

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

我有一个div在我的页面（可以包含图像，一个文本区域，其他），它的可拖动和可调整大小（感谢jQuery UI），我想让它可旋转，在一个角落的句柄拖动和旋转它使用css transform（-wekbit-transform，moz -transform）

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)

有可能吗？使用jQuery或其他Javascript？

Is it possible ? with jQuery or other Javascript ?

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

Actually i don't care of compatibility with IE.

，
Regards

Thanks in advance, Regards

推荐答案

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

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.

我想这有点麻烦，但它会工作：

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

这篇关于jQuery - CSS - 通过拖动鼠标事件旋转Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！