jQuery UI – Draggable元素在旋转时会丢失约束
我在这里创建了一个jsFiddle以在代码中说明我的问题（双击粉红色元素并尝试在蓝色框外拖动，再次双击并比较结果）。
问题：
当我在带有约束的可拖动元素上旋转CSS时，约束不能按预期工作。 可拖动元件可以部分地拖到容器外部。 我的猜测是它与CSS旋转的工作方式有关，但我不确定。
有没有办法解决这个问题？
似乎在css中应用rotate不会改变标签的宽度和高度。 这就是为什么你可以将你的div移到外面因为浏览器的标签大小（然后是限制）保持不变。 你可以通过检查div来看到它。
如果您知道，可以手动设置宽度和高度，或者每次切换css类时动态计算宽度和高度。
看到这篇与您的问题类似的post 。
编辑
我找到了一个可以做你想要的解决方案。 诀窍是使用容器div作为可拖动项，并管理子div中的旋转。 然后你需要调整孩子的左/右属性。 我没有搜索更好的公式，只是应用了固定值。 但它只是看它是否有效。
我希望这有帮助。