CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
sxw
sxw

Reputation: 109

Erratic jQuery Draggable Behavior

I have a diamond-shaped grid (so a normal square grid, rotated 45 degrees) and I want to be able to drag a point around inside of this grid. I made my grid using the canvas element and applied a transform: rotate(45deg). However, this causes the jQuery draggable behavior to become completely erratic and I'm not sure a) what the pattern is to the new behavior and b) how to fix it or work around.

Here's a link to the code: http://jsfiddle.net/Xgmgf/8/

Upvotes: 2

Views: 408

Answers (2)

Saif Hakim
Saif Hakim

Reputation: 83

http://jsfiddle.net/WnxdS/3/

In my implementation (in accordance with rsplak's response), we keep track of the change of the mouse movement between when mousedown is fired and when mousemove fires. Then, with simple transformations, we rotate this change 45deg ccw, and change the position of the draggable from its original position by this amount.

These are the simple transformations:

a. First we flip the y coordinate (y-axis points downwards on a computer)

[x]      [ x]
[y]  --> [-y]

b. Then we perform the rotation:

[cos(t) -sin(t)][ x]      [xcos(t)+ysin(t)]
[sin(t)  cos(t)][-y]  --> [xsin(t)-ycos(t)]

c. And then we unflip the y coordinate.

[xcos(t)+ysin(t)]     [ xcos(t)+ysin(t)]
[xsin(t)-ycos(t)] --> [-xsin(t)+ycos(t)]

So if our change in mouse coordinates is (dx,dy), we would increment the draggable's coordinates by (dx*cos(45)+dy*sin(45), -dx*sin(45)+dy*cos(45))

Upvotes: 4

user657496
user657496

Reputation:

Aiii, behaviour that could have been expected. Draggable sets the Helper x and y axis to the cursor x and y positions on mousechange. But, your mouse x and y axis are calculated differently without taking into account that you're in a rotated div. The calculated x and y values are given to the div, which is placed with in mind that the div is rotated. That's why when you move your mouse up while dragging, the block position changes 45deg relative to your mousemovement.

You could try editing draggable itself (or overwriting some functions) by using Guffa's explanation on how to get the x and y position in a rotated div using sin() and cos() but I think it's going to be hard if not impossible to fix yourself. There's no reason for draggable to act this way when the draggable div is inside the rotated div, so it's probably a bug. Good luck mate!

Upvotes: 1

Related Questions