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

Question

我需要"用户友好"的旋转,拖动和可调整大小的DIV.但是,当旋转此DIV时,RESIZE功能非常有效.不像图像编辑器.用户无法正确处理调整大小.怎么做？

jsFiddle示例

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

研究了一个类似的问题:如何获得一个旋转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();
});

在旋转角度时调整大小会改变盒子的位置,宽度和高度,并使其以某种奇怪的方式移动.这就是为什么它在某些图形程序中不起作用的原因.

由于您没有表明您希望行为者喜欢什么,我无法正确回答您的问题:用户无法正确处理调整大小.怎么做？

我希望这有助于解释这个问题.