CODEWITHSUNDEEP
jquery
Vani
Vani

Reputation: 1353

Jquery containment problem with Image rotation

HI All. I am using the below code to rotate the drag/dropped image.The rotation is working fine,but when i start rotating ,the image moves outside the "div" container .Anything 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;">

Thanks,

Upvotes: 3

Views: 3385

Answers (2)

Marcus Lind
Marcus Lind

Reputation: 11460

As an alternative to @Orblings answer that don't require any additional Javascript, Math or calculations.

Instead of making the object both draggable and rotatable, you split it up into a container that is draggable, and a child that is rotatable.

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

By doing this, your draggable element always stay leveled with a fixed bounding box while its only the child elements bounding box that changes. Since this one is not limitted to the container, it can still be outside.

Upvotes: 0

Orbling
Orbling

Reputation: 20612

The Dimension Problem with CSS3 Rotation

When a DOM element is rotated using the CSS3 transform properties (or the equivalent browser specific routines), the object is rotated to a given angle, but the computed width and height are left untouched. Presumably because the transformations happen after all other redraw events and the original size variables are left as they were.

Rotation does not alter the actual size of an object, however, in the HTML DOM, all objects must be within a rectangular bounding box; the size of this bounding box will alter to accommodate the new extent of the rotated image.

Routines that calculate the position of elements in the DOM tend to rely solely on the position of the element (left & top), and the size of the element (width & height), as all elements are rectangles, this is fine, the rectangular bounding box is identical to the object itself. When the item is rotated this ceases to be true, so routines no longer work correctly, as the width and height of the bounding box are potentially different to the object itself.

Rotation with Bounding Box

Rotation with Bounding Box

The bounding box width and height is simple enough to calculate mathematically, there was a question some time ago on this topic, with an answer given by casablanca stating the mathematics to calculate the new widths and heights. (He also states how to calculate the new positions, but with CSS rotatation, unless you change the origin of rotation, the left/top stay the same.)

Rectangle Rotation - New Dimensions

The maximum extent is given by the diagonal of a rectangle:

Diagonal of a Rectangle

Based on the code the OP gave above, I have created a little demonstration of this in action - note the size of the bounding box as it rotates, and how the .draggable() container fails to contain the item over the extent to which it is beyond it's original dimensions.

Upvotes: 15

Related Questions