不稳定的 jQuery 可拖动行为
我有一个菱形网格（所以是一个普通的方形网格，旋转 45 度），我希望能够在该网格内部拖动一个点。我使用画布元素制作了网格并应用了变换：旋转（45deg）。然而，这会导致 jQuery 可拖动行为变得完全不稳定，并且我不确定 a) 新行为的模式是什么以及 b) 如何修复它或解决该问题。
这是代码的链接： http://jsfiddle.net/Xgmgf/8/
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/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
http://jsfiddle.net/WnxdS/3/
在我的实现中（根据rsplak的响应） ，我们跟踪 mousedown 触发和 mousemove 触发之间鼠标移动的变化。然后，通过简单的变换，我们将这个变化逆时针旋转 45 度，并将可拖动的位置从其原始位置更改这个量。
是简单的转换：
这些 首先，我们翻转 y 坐标（y 轴在计算机上指向下方）
b．然后我们执行旋转：
c。然后我们取消翻转 y 坐标。
因此，如果鼠标坐标的变化是 (dx,dy)，我们会将可拖动的坐标增加 (dx*cos(45)+dy*sin(45), -dx*sin(45)+dy*cos(45) ）
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)
b. Then we perform the rotation:
c. And then we unflip the y coordinate.
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))
Aiii，这是可以预料到的行为。 Draggable 将 Helper x 和 y 轴设置为 mousechange 上的光标 x 和 y 位置。但是，您的鼠标 x 轴和 y 轴的计算方式不同，没有考虑到您处于旋转的 div 中。计算出的 x 和 y 值被赋予 div，放置该 div 时要考虑到 div 是旋转的。这就是为什么当您在拖动时向上移动鼠标时，块位置相对于您的鼠标移动会改变 45 度。
您可以尝试使用 Guffa 解释了如何使用 sin() 和 cos() 在旋转的 div 中获取 x 和 y 位置，但我认为这将是很难的，如果不是不可能的话，你自己可以修复。当可拖动的 div 位于旋转的 div 内部时，可拖动的 div 没有理由以这种方式运行，因此这可能是一个错误。祝你好运，伙计！
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!