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 变换 (-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.

提前致谢，问候

推荐答案

使用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屋！