Question

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

以下是代码的链接：http://jsfiddle.net/Xgmgf/8/

Answer 1

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

在我的实现中（根据rsplak的响应），我们记录了moused被触发和mousemove激活之间鼠标移动的变化。然后，通过简单的转换，我们将此更改旋转45deg ccw，并将可拖动的位置从其原始位置更改此量。

这些是简单的转换：

一个。首先，我们翻转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））

Answer 2

Aiii，本来可以预期的行为。 Draggable将Helper x和y轴设置为mousechange上的光标x和y位置。但是，您的鼠标x和y轴的计算方式不同，而不考虑您是否处于旋转的div中。计算出的x和y值被赋予div，其中记住div被旋转。这就是为什么当您在拖动时向上移动鼠标时，块位置相对于您的鼠标移动会改变45度。

您可以尝试编辑draggable本身（或覆盖某些函数），使用Guffa's解释如何使用sin（）和cos（）获取旋转div中的x和y位置但是我认为它会如果不是不可能自己解决，那就很难。当可拖动的div在旋转的div内部时，没有理由以可行的方式执行此操作，因此它可能是一个错误。祝你好运！[/ p>

不稳定的jQuery可拖动行为

2 个答案: