How to move an object diagonally

Processing Beginners
1

i would like to move an object diagonally. right now it moves up and leaves the screen with just void mousepressed, mousedragged and mousereleased

2

Demonstrates using mouse coordinates to drag rectangle:

/*
 * Mouse Functions.
 * Click on rectangle and drag around screen.
 */

float x = 100;
float y = 100;
float w = 200;
float h = 100;

float xOffset = 0.0;
float yOffset = 0.0;

boolean msOver = false;
boolean selected = false;

void setup() {
  size(700, 600);
  rect(x, y, w, h);
}

void draw() {
  background(0);
  // Test if the cursor is over the rectangle
  if (mouseX >= x && mouseX <= x+w &&  mouseY >= y && mouseY <= y+h) {
    msOver = true;
    cursor(HAND);
    if (!selected) {
      stroke(255);
      fill(153);
    }
  } else {
    cursor(ARROW);
    stroke(153);
    fill(153);
    msOver = false;
  }
  rect(x, y, w, h);
}

void mousePressed() {
  if (msOver) {
    selected = true;
    fill(255, 255, 255);
  } else {
    selected = false;
  }
  xOffset = mouseX-x;
  yOffset = mouseY-y;
}

void mouseDragged() {
  if (selected) {
    x = mouseX-xOffset;
    y = mouseY-yOffset;
  }
}

void mouseReleased() {
  selected = false;
}
3

Player Move

4

With keyboard arrows the user can only get up, down, left, right - no diagonal.