jquery faire pivoter, faire glisser et redimensionner

Question

Je travaille sur un projet dans lequel je veux faire glisser, faire pivoter et redimensionner des images. Ceci est mon premier projet jquery et jusqu'à présent, tout marche bien. Trough stackoverflow J'ai trouvé le plugin jqueryrotate qui gère la rotation. Le problème est que j'ai maintenant une image que je peux faire glisser et tourner mais quand j'essaye de redimensionner une image pivotée, j'obtiens des résultats amusants. Le redimensionnement après la rotation semble désactivé.

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

Le violon doit rendre les choses claires. Fiddle

tourne une image Double-cliquer 90 degrés :)

Est-ce qu'il ya quelqu'un qui peut me aider.

Merci d'avance. Édition: correction du resizer dans l'exemple du violon Veuillez noter que le problème est le mieux visible si vous tournez une fois de façon à faire pivoter l'image de 90 degrés. Après cela, essayez de redimensionner.

Le problème ne se produit pas lorsqu'une image est de 0 degrés ou 180 degrés pivotés

Answer 1

Comme vous l'avez fait avec draggable(), vous devez utiliser rotate() sur le parent div.

$(".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/ (wow 163 ...)