图像旋转的Jquery包含问题

大家好。 我使用下面的代码来旋转拖放图像。旋转工作正常，但是当我开始旋转时，图像移动到“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("").value, deleteimage); } $('#frame .rotatable').draggable({ containment: 'parent' }); }); }); 

HTML

谢谢，

Answer 1

CSS3旋转的维度问题

---

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

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

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

带边界框的旋转

边界框的宽度和高度很简单，可以用数学方法计算， 前一段时间有一个关于这个主题的问题 ，由卡萨布兰卡给出答案，说明数学计算新的宽度和高度。 （他还说明了如何计算新的位置，但是使用CSS旋转，除非你改变旋转原点，否则左/上保持不变。）

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

基于OP上面提供的代码，我已经创建了一个实际的演示 – 请注意边界框旋转时的大小，以及.draggable()容器如何在其范围内包含该项目超出了它的原始尺寸。

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

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

Answer 2

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

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

通过这样做，您的可拖动元素始终使用固定的边界框保持水平，而其唯一的子元素边界框会发生变化。 由于这个不限于container ，它仍然可以在外面。