Question

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?

Answer 1

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/