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

回転角度でボックスの位置を変更したとき、それは幅と高さだし、それは奇妙な方法の一種で移動させ、サイズ変更。これは、グラフィックスプログラムのように動作しない理由です。

あなたがあなたのようなものを好むと言っているわけではないので、私はあなたの質問に正しく答えることができません。ユーザーは適切にサイズ変更を処理できません。それを作る方法？

私はこれが問題の説明に役立つことを望みます。