Moving an image a certain distance at a time

Hey,

I have a question about something I'm not sure where to begin with.

If I have an image, which is displayed on a panel, and when the user clicks and drags the image, it will move x amount of pixels in that direction(left, right, up, down and diagonally).

e.g

[x][][][][]
[x][][][][]
[x][][][][]
[x][][][][]
[x][][][][]

to

[][x][][][]
[][x][][][]
[][x][][][]
[][x][][][]
[][x][][][]

it will move straight to this point without stopping in between.

I'm not looking for a solution, but rather a startng point for this concept, or any material you might suggest reading up upon which would help. I would supply code but at this point in time, the code is being planned with pen and paper and this is something I would like to get sorted out before I begin.

Thanks!