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> 

中包装盒有助于出来拖动。

的jQuery

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

当在一个旋转的角度而变化的方块的位置调整大小，它的宽度和高度，并且使得它在一个排序的奇怪的方式移动。这就是为什么它在某些图形程序中不能工作。

既然您没有指出您希望行为者喜欢什么，我无法正确回答您的问题：用户无法正确处理调整大小。如何做到这一点？

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