jQuery UI - Draggable元素在旋转时会丢失约束 [英] jQuery UI - Draggable element looses constraint when rotated

问题描述

我创建了一个jsFiddle 这里来说明我的代码问题（双击粉红色元素，然后尝试

b $ b

当我对带有约束的draggable元素进行CSS旋转时，约束不会按预期工作。可拖动元素可以部分地拖动到容器外部。我猜想它与CSS旋转的工作方式有关，但我不确定。

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

解决方案

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

你可以手动设置宽度和高度，如果你知道它或计算动态每次切换你的CSS类。 / p>

查看此职位类似

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

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

I've created a jsFiddle here to illustrate my problem in code (Double click the pink element and try to drag on outside the blue box, double click again and compare the results).

Problem:

When I make a CSS rotate on a draggable element with a constraint, the constraint doesn't work as expected. The draggable element can be dragged partially outside the container. My guess is that it has something to do with how the CSS rotate works, but I'm not sure.

Is there some way to solve this problem?

解决方案

It seems that applying rotate in css does not change width and height of the tag. That's why you can move your div outside because for the browser the size of your tag (and then the limits) remains unchanged. You can see that simply by inspecting the div.

You can manually set the width and height if you know it or calculate it dynamically each time you switch your css classes.

See this post similar to your question.

Edit

I found a solution to do what you want. The trick is to use a container div as a draggable item, and manage the rotation in the child div. Then you need to adjust top/left properties of the child. I didn't search for a better formula and simply applied fixed values. But it was only to see if it works.

I hope this help.

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

这篇关于jQuery UI - Draggable元素在旋转时会丢失约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！