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