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

當在一個旋轉的角度而變化的方塊的位置調整大小，它的寬度和高度，並且使得它在一個排序的奇怪的方式移動。這就是爲什麼它在某些圖形程序中不能工作。

既然您沒有指出您希望行爲者喜歡什麼，我無法正確回答您的問題：用戶無法正確處理調整大小。如何做到這一點？

我希望這有助於解釋這個問題。