불규칙한 jQuery 드래그 가능한 동작

Question

저는 다이아몬드 모양의 그리드 (보통 정사각형 그리드가 45도 회전되었습니다)를 가지고 있으며,이 그리드 내부에서 점을 드래그 할 수 있기를 원합니다. 캔버스 요소를 사용하여 그리드를 만들고 변형을 적용했습니다 : rotate (45deg). 그러나 이로 인해 jQuery draggable 동작이 완전히 엉뚱한 상태가되고 a) 패턴이 새로운 동작에 어떤 영향을 미치는지, b)이를 수정하거나 해결하는 방법을 알지 못합니다. http://jsfiddle.net/Xgmgf/8/

Answer 1

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

은 (rsplak의 반응에 따라), 우리는 MouseMove 이벤트 화재 mousedown 해고시 사이와 마우스 움직임의 변화를 추적. 그런 다음 간단한 변환을 사용하여이 변경 사항을 45deg ccw로 회전하고 원래 위치에서 드래그 가능 위치를이 양만큼 변경합니다.

다음은 간단한 변환입니다.

a. 먼저 y 좌표를 뒤집습니다 (y 축은 컴퓨터에서 아래쪽으로).

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

b. 그런 다음 회전을 수행합니다.

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

c. 그리고 나서 우리는 y 좌표를 unflip합니다.

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

그래서 마우스 우리의 변화는 좌표 경우) (, 우리는 (DX * COS (45) + DY의 * 죄 (45), -dx * 죄 드래그의 좌표를 증가 것이다 (DX, DY) 45 + dy * cos (45))

Answer 2

AIII 예상 될 수 있었다 행동 :

다음은 코드에 대한 링크입니다. Draggable은 도우미 x 및 y 축을 마우스 변경시 커서 x 및 y 위치로 설정합니다. 그러나 마우스 x 및 y 축은 회전 된 div에있는 것을 고려하지 않고 다르게 계산됩니다. 계산 된 x와 y 값은 div가 회전된다는 것을 명심하여 배치 된 div에 주어집니다. 그래서 드래그하는 동안 마우스를 위로 움직이면 블록 위치가 마우스 움직임과 관련하여 45 도로 바뀝니다.

Guffa's sin() 및 cos()을 사용하여 회전 된 div에서 x 및 y 위치를 얻는 방법에 대한 설명을 사용하여 draggable 자체를 편집하거나 (일부 함수를 덮어 쓰는) 시도해 볼 수는 있지만 자신을 고치는 것은 불가능하지 않습니다. 드래그 할 수있는 div가 회전 된 div 안에있을 때이 방법으로 드래그 할 이유가 없으므로 버그 일 가능성이 큽니다. 행운을 빌어 요! 내 구현에서