图像旋转的Jquery包含问题

Question

全部。        我使用下面的代码来旋转拖放图像。旋转工作正常，但是当我开始旋转时，图像移动到“div”容器之外。我想念的东西。

    //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;">

谢谢，

Answer 1

CSS3旋转的维度问题

---

当使用CSS3变换属性（或等效的浏览器特定例程）旋转DOM元素时，对象将旋转到给定角度，但计算出的宽度和高度保持不变。大概是因为转换发生在所有其他重绘事件之后，原始大小变量保持不变。

旋转不会改变对象的实际大小，但是，在HTML DOM中，所有对象都必须位于矩形边界框内;此边界框的大小将改变以适应旋转图像的新范围。

计算DOM中元素位置的例程往往仅依赖于元素的位置（左和上），以及元素的大小（宽度和高度），因为所有元素都是矩形，这个很好，矩形边界框与对象本身相同。当项目被旋转时，这将不再成立，因此例程不再正常工作，因为边界框的宽度和高度可能与对象本身不同。

使用边界框旋转

边界框的宽度和高度很简单，可以用数学方法计算，有一个question some time ago on this topic，答案由 casablanca 给出，说明数学计算新的宽度和高度。 （他还说明了如何计算新的位置，但是使用CSS旋转，除非你改变旋转原点，否则左/上保持不变。）

最大范围由矩形的对角线给出：

根据OP上面提供的代码，我已经创建了一个实际的演示 - 请注意边界框旋转时的大小，以及.draggable()容器如何无法包含该项目它超出原始尺寸的程度。

• 方形演示： http://jsfiddle.net/pkHFZ/

• 矩形演示： http://jsfiddle.net/pkHFZ/2/

Answer 2

作为@Orblings的替代方案，不需要任何额外的Javascript，数学或计算。

不是让对象既可拖动又可旋转，而是将其拆分为可拖动的容器和可旋转的子容器。

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

通过执行此操作，您的可拖动元素始终使用固定的边界框保持水平，而其唯一的子元素边界框会发生变化。由于此版本不限于container，因此它仍然可以在外面。