Inner div inside an outer rotated div does not follow mouse in case dragging with jQuery UI

Question

I have an inner div inside an outer div. The inner div is draggable and outer is rotated through 40 degree. This is a test case. In an actual case it could be any angle. There i

Answer 1

Here is my approach to this problem.

http://jsfiddle.net/2X9sT/21/

I put the point outside the rotated div. That way I'm assured that the drag event will produce a normal behavior (no jumping in weird directions). I use the draggable handler to attach the point to the mouse cursor.

In the drag event, I transform the drag offset to reflect the new values. This is done by rotating the offset around the outer div center in the opposite direction of the rotation angle.

I tested it and it seems to be working in IE9, Firefox, and Chrome.

You can try different values for angle and it should work fine.

I also modified the HTML so it is possible to apply the same logic to multiple divs in the page.

Edit:

I updated the script to account for containment behavior as well as cascading rotations as suggested in the comments.

I'm also expirementing with making the outer div draggable inside another div. Right now it is almost working. I just need to be able to update the center of the dragged div to fix the dragging behavior.

Try Dragging the red div.

http://jsfiddle.net/mohdali/kETcE/39/