Fixed mouse pointer with jQuery draggable

Question

I'm building a little game in HTML5. The canvas element is a viewport into the game world. The user can move the viewport's position in the world by clicking and dragging with the mouse on a small icon.

The problem is that the scrolling stops when the mouse pointer hits the edge of the screen. In all likelihood, that will limit scrolling in one of the directions severely, since the icon will be in one of the corners of the page.

The only technical solution I can think of would be to somehow fix the mouse pointer's position on the icon and detect the relative movement each frame. Basically I would just reset the pointer position back to the center of the icon after each drag event. Unfortunately, I'm fairly positive that this is not possible. Playing with the user's pointer is a big no-no from a usability and security standpoint.

So, is there any other way to do what I want? I'm primarily looking for technical ideas here, but suggestions for a more appropriate interface would also be welcome.

Answer 1

Three possible solutions:

1. Move this "joystick" icon 100 pixels off of the corner. Give it opacity until it is hovered. Have the click-and-drag movements "sustain" so that click-drag-and-holding the cursor 40 pixels away from the joystick center causes continuous screen panning.

2. Use arrows, similar to Google Maps. (You can also combine this with the first solution by changing the hand grabber part to the "joystick" part.)

3. Do something completely different. For example, have the screen pan when the cursor gets close to any of the four edges.