mouseDragged()

A function that's called when the mouse moves while a button is pressed.

Declaring the function mouseDragged() sets a code block to run automatically when the user clicks and drags the mouse:

function mouseDragged() {
  // Code to run.
}

The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mouseDragged() is called by p5.js:

function mouseDragged() {
  if (mouseX < 50) {
    // Code to run if the mouse is on the left.
  }

  if (mouseY > 50) {
    // Code to run if the mouse is near the bottom.
  }
}

The parameter, event, is optional. mouseDragged() is always passed a MouseEvent object with properties that describe the mouse drag event:

function mouseDragged(event) {
  // Code to run that uses the event.
  console.log(event);
}

On touchscreen devices, mouseDragged() will run when a user moves a touch point if touchMoved() isn’t declared. If touchMoved() is declared, then touchMoved() will run when a user moves a touch point and mouseDragged() won’t.

Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function.