Problem saving jQuery with image rotation

Question

HI All. I use the code below to rotate an image with drag / drop. Rotation works fine, but when I start to rotate, the image moves outside the "div" container. All that I am missing.

    //Moving outside the container for first time.After dragging inside the div,then rotates inside the 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;">

Thank,

Answer 1

CSS3 rotation measurement issue

---

When the DOM element is rotated using the CSS3 transform properties (or equivalent browser routines), the object rotates by the specified angle, but the calculated width and height remain intact. Presumably, because the transformations occur after all the other redraw events, and the original size variables remain as they were.

, HTML DOM ; , .

, DOM, ( ) ( ), , . , , , .

, , , , casablanca, , . ( , , CSS, , / .)

:

, , - .draggable() .

• Square Demo: http://jsfiddle.net/pkHFZ/

• : http://jsfiddle.net/pkHFZ/2/

Answer 2

@Orblings, Javascript, Math .

, , , , .

<div class="container">
    <span class="draggable-element">
        <span class="rotatable-element"></span>
    </span>
</div>

, , . container, .