Неустойчивое поведение jQuery Draggable

Question

У меня есть ромбовидная сетка (то есть обычная квадратная сетка, повернутая на 45 градусов), и я хочу иметь возможность перетаскивать точку внутри этой сетки.Я сделал свою сетку, используя элемент canvas, и применил transform: rotate (45deg).Однако это приводит к тому, что перетаскиваемое поведение jQuery становится совершенно ошибочным, и я не уверен, а) каков шаблон для нового поведения и б) как его исправить или обойти.

Вот ссылка накод: http://jsfiddle.net/Xgmgf/8/

Answer 1

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

В моей реализации (в соответствии с ответом rsplak) мы отслеживаем изменение движения мыши между моментом срабатывания мыши и моментом запуска мыши. Затем, с помощью простых преобразований, мы поворачиваем это изменение на 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)]

с. И тогда мы откроем координату у.

[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 устанавливает ось хелпера x и y в позиции курсора x и y при смене мыши. Но ваши оси мыши x и y рассчитываются по-разному, без учета того, что вы находитесь в повернутом div. Вычисленные значения x и y передаются в div, что подразумевается при вращении div. Вот почему, когда вы перемещаете мышь вверх при перетаскивании, положение блока изменяется на 45 градусов относительно вашего движения мыши.

Вы можете попробовать отредактировать сам перетаскиваемый объект (или перезаписать некоторые функции), используя 1004 * объяснение Гуффы о том, как получить положение x и y в повернутом div, используя sin () и cos (), но я думаю, что это будет трудно, если не невозможно исправить себя. Там нет причин для перетаскивания действовать таким образом, когда перетаскиваемый div находится внутри повернутого div, так что это, вероятно, ошибка. Удачи, приятель!