如何使用鼠标正确地进行旋转-可拖动

Question

http://jsfiddle.net/avPf6/1056/

代码正在工作，但旋转混乱，无法正确跟随鼠标：

ele.css('position', 'relative');
$('#handle').draggable({
  opacity: 0.01,
  helper: 'clone',
  drag: function(event, ui) {
    console.log(ui);
    var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
    $(this).parent().css({
      '-moz-transform': rotateCSS,
      '-webkit-transform': rotateCSS
    });
  }
});

如何正确旋转？

Answer 1

我建议使用rotable.js脚本来实现这一点。它将预生成正确旋转元件所需的所有计算。

更新示例

通过这样做，您实际上可以将jQuery简化为以下内容。下面是一个使用您提供的HTML/CSS的基本示例：

$('.draggable').draggable().rotatable({
  handle: $('.draggable .handle')
});

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.draggable {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}
.draggable .handle {
  position: absolute;
  bottom: 5px;
  right: 5px;
  height: 10px;
  width: 10px;
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<div class="parent">
  <div class="draggable">
    <div class="handle"></div>
  </div>
</div>