Jquery containment problem with Image rotation -

hi all. using below code rotate drag/dropped image.the rotation working fine,but when start rotating ,the image moves outside "div" container .anything missing.

    //moving outside container first time.after dragging inside div,then rotates inside div   var test = 5;   var mousedown = false;   $(function() {       $('.frame').mousedown(function(e) { mousedown = true; });       $('.frame').mouseup(function(e) { mousedown = false; });       $('.frame .rotatable').live('mousemove', function(e) {           if ((mousedown) && (e.ctrlkey)) {                test = test + 10;               var currentid;               document.getelementbyid('angle').value = test;               $(this).rotate({ angle: test });               var currentid = $(this).attr('id');               var id = currentid.substring(8);                                 var deleteimage = 0;               var angle = test;               savecoords(e.clientx, e.clienty, angle, id, document.getelementbyid("<%=trafficid.clientid%>").value, deleteimage);           }           $('#frame .rotatable').draggable({ containment: 'parent' });        });   }); 

html

<div id="frame" class="frame" runat="server"  style="width:550px; height:400px;background-position:bottom; border:1px solid #000;"> 

thanks,

the dimension problem css3 rotation

---

when dom element rotated using css3 transform properties (or equivalent browser specific routines), object rotated given angle, computed width , height left untouched. presumably because transformations happen after other redraw events , original size variables left were.

rotation not alter actual size of object, however, in html dom, objects must within rectangular bounding box; size of bounding box alter accommodate new extent of rotated image.

routines calculate position of elements in dom tend rely solely on position of element (left & top), , size of element (width & height), elements rectangles, fine, rectangular bounding box identical object itself. when item rotated ceases true, routines no longer work correctly, width , height of bounding box potentially different object itself.

rotation bounding box

the bounding box width , height simple enough calculate mathematically, there question time ago on topic, answer given casablanca stating mathematics calculate new widths , heights. (he states how calculate new positions, css rotatation, unless change origin of rotation, left/top stay same.)

the maximum extent given diagonal of rectangle:

based on code op gave above, have created little demonstration of in action - note size of bounding box rotates, , how .draggable() container fails contain item on extent beyond it's original dimensions.

• square demo: http://jsfiddle.net/pkhfz/

• rectangular demo: http://jsfiddle.net/pkhfz/2/