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

标签 jquery jquery-ui css

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

问题:

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

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

最佳答案

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

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

See this post similar to your question .

编辑

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

希望对您有所帮助。

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

关于jQuery UI - 可拖动元素在旋转时松开约束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10013506/

相关文章:

jquery - 防止 jQuery 在元素鼠标悬停时将文档顶部推到顶部?

javascript - 如果歌剧 - CSS 有什么不同?

html - 剪下透明三 Angular 形的图像

html - CSS 网格布局中重叠的行

javascript - jQuery onLoad 处理程序

javascript - 动态添加 html 字段,然后将选择的值相乘并相加总计

php - 如何仅在加载 div 时运行函数?

jquery - 停止 jQuery.css() 函数

javascript - Jquery 自动完成不工作

JQuery 可排序(故障/跳转)且容器溢出