jQuery 드래그 가능한 고정 마우스 포인터

Question

HTML5에 게임을 조금 만들었습니다. 캔버스 요소는 게임 세계에 대한 뷰포트입니다. 사용자는 마우스로 작은 아이콘을 클릭하고 드래그하여 세계에서 뷰포트의 위치를 ​​이동할 수 있습니다.

마우스 포인터가 화면 가장자리에 닿으면 스크롤이 멈추는 문제가 있습니다. 아이콘이 페이지의 모퉁이 중 하나에 있기 때문에 모든 방향으로 중 하나에서 스크롤하는 것을 제한 할 것입니다.

내가 생각할 수있는 유일한 기술적 해결책은 어떻게 든 마우스 포인터의 위치를 ​​아이콘에 고정시키고 각 프레임의 상대적 이동을 감지하는 것입니다. 기본적으로 각 드래그 이벤트 후 아이콘의 중심으로 포인터 위치를 다시 설정합니다. 불행히도, 나는 이것이 가능하지 않다는 것이 상당히 긍정적입니다. 사용자의 포인터로 재생하는 것은 유용성 및 보안 측면에서 큰 문제가 아닙니다.

그래서 내가 원하는 것을 할 수있는 다른 방법이 있습니까? 저는 주로 여기에서 기술적 아이디어를 찾고 있습니다 만,보다 적절한 인터페이스에 대한 제안도 환영 할 것입니다.

Answer 1

세 가지 가능한 해결 방법 :

1. 이동이 "조이스틱"아이콘 코너의 오프 100 픽셀. 그것을 잡을 때까지 불투명하게하십시오. 조이스틱 센터에서 40 픽셀 떨어진 곳으로 커서를 클릭하여 드래그 앤드 홀드하면 연속적인 화면 이동이 발생하도록 클릭 앤 드래그 동작을 "유지"하십시오.

2. Google Maps과 유사한 화살표를 사용하십시오. (핸드 그래버 파트를 "조이스틱"파트로 변경하여 첫 번째 솔루션과 결합 할 수도 있습니다.)

3. 완전히 다른 작업을 수행하십시오. 예를 들어, 커서가 네 모서리 중 하나에 가까워지면 화면 이동을하십시오.