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

Question

我已经搜索了几天，但没有实质性的结果，也许有人可以在这里帮助我。

我网页上有一个div（可能包含图像、文本区域或其他元素），它可以拖动和调整大小（感谢jQuery UI），我想使它“可旋转”，并在角落中添加一个手柄以使用css transform（-webkit-transform、moz-transform）进行拖动和旋转。

这种做法是否可行？使用jQuery或其他JavaScript库实现是否可行？

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

预先感谢，问候。

- maiis

---

实际上，如果您不关心与IE的兼容性，那么您可以做任何事情。 - Sanket Sahu

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

问题在于，您的问题对于如何处理由此产生的两种行为冲突（当您拖动对象时，既会旋转又移动）略微不太清楚。这个解决方法只是让鼠标的左右移动确定旋转的程度，而默认的拖动行为（移动）仍然存在。

编辑：

我想这有点取巧，但它会起作用：

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

- Yi Jiang

---

谢谢，从你的例子开始，我已经掌握了制作所需内容的新方法 :) - maiis