jQuery UI - 可拖动元素在旋转时松开约束

Question

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

问题:

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

有什么办法可以解决这个问题吗？

Answer 1

似乎在 css 中应用旋转不会改变标签的宽度和高度。这就是为什么你可以将你的 div 移到外面的原因，因为对于浏览器来说，你的标签的大小(然后是限制)保持不变。您只需检查 div 即可看到这一点。

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

See this post similar to your question .

编辑

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

希望对您有所帮助。

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