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

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

1 个答案:

编辑：