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 is another div called point which is positioned as shown in the figure. ( I am from a flash background . In Flash if I were to drag the inner div it would follow the mouse even if its contained inside an outer rotated div.) But in HTML the inner div does not follow the mouse as it can be seen from the fiddle. I want the div ‘point’ to exactly follow the mouse. Is this possible. I tried to work it using trignometry but could not get it to work.

http://jsfiddle.net/bobbyfrancisjoseph/kB4ra/8/

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/