JQuery rotate, drag and resize

Question

I am working on a project in which I want to drag, rotate and resize images. This is my first jquery project, and so far everything is working fine. Tover stackoverflow I found a jqueryrotate plugin that handles rotation.

The problem is that I now have an image that I can drag and rotate, but when I try to resize the rotated image, I get some funny results. Resizing after turning seems off.

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

The violin should be clear. Fiddle

Double-click rotates the image 90 degrees :)

Is there anyone who can help me?

Thanks in advance.

Edit: Resizing in the script example has been fixed. Please note that the problem is best seen if you rotate once so that the image rotates 90 degrees. After that, try resizing.

The problem does not occur if the image is rotated 0 or 180 degrees.

Answer 1

As with draggable() , you should use rotate() in the 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 ...)