jQuery UI - 可旋转元素在旋转时会丢失约束

Question

我创建了一个jsFiddle here来说明代码中的问题（双击粉红色元素并尝试在蓝色框外拖动，再次双击并比较结果）。

问题：

当我在带有约束的可拖动元素上旋转CSS时，约束不能按预期工作。可拖动元件可以部分地拖到容器外部。我的猜测是它与CSS旋转的工作方式有关，但我不确定。

有没有办法解决这个问题？

Answer 1

似乎在css中应用rotate不会改变标签的宽度和高度。这就是为什么你可以把你的div移到外面因为浏览器的标签大小（然后是限制）保持不变。你可以通过检查div来看到它。

如果您知道，可以手动设置宽度和高度，或者每次切换css类时动态计算它。

See this post similar to your question

修改

我找到了一个可以做你想要的解决方案。诀窍是使用容器div作为可拖动项，并管理子div中的旋转。然后你需要调整孩子的左/右属性。 我没有搜索更好的公式，只是应用了固定值。但它只是看它是否有效。

我希望这有帮助。

  

http://jsfiddle.net/Sp6qa/2/