javascript - 不稳定的 jQuery 可拖动行为

Question

我有一个菱形网格(因此是一个正常的正方形网格，旋转了 45 度)，我希望能够在该网格内部拖动一个点。我使用 canvas 元素制作了我的网格并应用了一个转换:rotate(45deg)。但是，这会导致 jQuery 可拖动行为变得完全不稳定，我不确定 a) 新行为的模式是什么以及 b) 如何修复或变通。

这是代码的链接:http://jsfiddle.net/Xgmgf/8/

Answer 1

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

在我的实现中(根据 rsplak 的响应)，我们跟踪鼠标移动在触发 mousedown 和触发 mousemove 之间的变化。然后，通过简单的变换，我们将这个变化逆时针旋转 45 度，并将可拖动对象的位置从其原始位置改变这个量。

这些是简单的转换:

一个。首先我们翻转y坐标(在电脑上y轴指向下方)

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

然后我们执行旋转:

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

然后我们取消翻转 y 坐标。

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

因此，如果鼠标坐标的变化是 (dx,dy)，我们会将可拖动对象的坐标增加 (dx*cos(45)+dy*sin(45), -dx*sin(45)+dy*cos (45))