1

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?

Magnus
  • 417
  • 4
  • 18

1 Answers1

2

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/

Community
  • 1
  • 1
Mordhak
  • 2,646
  • 2
  • 20
  • 14
  • Rotating seems to be quite special, because when I tried the code again with some updates to calculate the new width and height, it still didn't work as expected: http://jsfiddle.net/Sp6qa/1/ – Magnus Apr 04 '12 at 18:19
  • I found a solution that works (maybe not the best). Check my edit and tell me if if fits your needs. – Mordhak Apr 06 '12 at 08:25
  • Seems like the best solution for now! – Magnus Apr 10 '12 at 17:54
  • This solution is so great. I was rotating the wrapping element with control icons inside it. I only changed it to rotate inside element instead of the wrapping one. So now my icons are fine also, and dragging is not broken. (dragging calculates wrong center position when element is rotated) – psycho brm Nov 08 '12 at 09:23