jquery回転、ドラッグ、サイズ変更

Question

私はドラッグ、回転、画像のサイズ変更を行うプロジェクトに取り組んでいます。 これは私の最初のjqueryプロジェクトです。これまでのことは大丈夫です。 Trough stackoverflow私は、回転を処理するプラグインjqueryrotateが見つかりました。

問題は、私は今周りにドラッグして回転できる画像を持っていますが、回転した画像のサイズを変更しようとすると面白い結果が得られます。回転後のサイズ変更はオフに見えます。

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.1.js"></script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  

<img id="resizableImage0" class="resize" width="100px" height="100px" alt="tile0" src="http://www.elaxtro.com/images/demo.png"> 
<img id="resizableImage1" class="resize" width="100px" height="100px" alt="tile1" src="http://www.specialized.com/OA_MEDIA/2009/bikes/9397-20_demo8_2_ano_blue_d.jpg"> 

jQueryの

window.zindex = 30; 

$(document).ready(function() { 
    $(".resize").resizable(); 

    $(".resize").parent().draggable({ 
     stack: "div" 
    }); 

    $(".resize").rotate({ 
     bind: { 
      dblclick: function() { 
       // get current 
       var currentAngle = $(this).get(0).Wilq32.PhotoEffect._angle; 
       var newAngle = currentAngle + 90; 
       $(this).rotate(newAngle); 
      } 
     } 
    }); 
}); 

フィドルは、物事を明確にする必要があります。 Fiddle

ダブルクリックで画像を90度回転させ:)

これで私を助けることができる誰もがあります。

ありがとうございます。

編集：フィダーの例でリサイザを修正しました 画像が90度回転するように一度回転させると、この問題が最もよく表示されます。その後、サイズを変更しようとします。画像が0度または180度にあなたがdraggable()で行ったように、あなたは親divにrotate()使用する必要があります

Answer 1

を回転させたとき

問題は発生しません。

$(".resize").resizable({handles: 'ne, se, sw, nw'}); 
$(".resize").parent().draggable({ 
    stack: "div" 
}); 
$(".resize").rotate({ 
    bind: { 
     dblclick: function() { 
      $(this).data('angle', $(this).data('angle')+90); 
      var w = $(this).css('width'); 
      $(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w}); 

     } 
    } 
}); 

http://jsfiddle.net/U64se/163/（すごい163 ...）