jQuery UI - 像在图像编辑器中一样旋转、拖动、调整 DIV 大小

Question

我需要“用户友好”的旋转、拖动和调整大小的 DIV。但是，当这个 DIV 被旋转时，RESIZE 函数的工作非常奇怪。不像在图像编辑器中。用户无法正确处理调整大小。如何制作？

jsFiddle Example

HTML：

<div id="blue"></div>

CSS：

#blue {
  top: 100px;
  left: 100px;
  width:200px;
  height:200px;
  background-color:blue;
  -ms-transform: rotate(120deg); /* IE 9 */
  -webkit-transform: rotate(120deg); /* Safari */
  transform: rotate(120deg);
}

jQuery

$("#blue").resizable({
    aspectRatio: false,
    handles: 'ne, se, sw, nw'
});

$("#blue").draggable();

Answer 1

解决了一个类似的问题：How to get four corners rotate handle for a rotatable div..?

在此，OP 想为每个角添加旋转手柄。但这也是您报告内容的一个很好的例子。

看看：https://jsfiddle.net/Twisty/7zc36sug/

HTML

<div class="box-wrapper">
  <div class="box">
  </div>
</div>

包装盒子有助于 Draggable。

jQuery

$(function() {
  // Assign Draggable
  $('.box-wrapper').draggable({
    cancel: ".ui-rotatable-handle"
  });
  // Assign Rotatable
  $('.box').resizable().rotatable();
});

在旋转角度时调整大小会改变盒子的位置，它的宽度和高度，并导致它以一种奇怪的方式移动。这就是为什么它不像在某些图形程序中那样工作的原因。

由于您没有表明您希望行为是什么样的，我无法正确回答您的问题：用户无法正确处理调整大小。如何制作？

我希望这有助于解释问题。