I’ve recently received several e-mail questions related to dragging a shape around in Processing with the mouse. So here is a simple demonstration of one way to do it. Note that because a web applet doesn’t have “focus” when you first load this page, you may have to click in the applet window once before the rectangle can be dragged.

Example

clickdrag

Draggable

// Click and Drag an object
// Daniel Shiffman 

Draggable d;

void setup() {
  size(200,200);
  smooth();
  d = new Draggable(50,50,60,25);
}

void draw() {
  background(255);
  d.rollover(mouseX,mouseY);
  d.drag(mouseX,mouseY);
  d.display();
}

void mousePressed() {
  d.clicked(mouseX,mouseY);
}

void mouseReleased() {
  d.stopDragging();
}
// Click and Drag an object
// Daniel Shiffman 

// A class for a draggable thing

class Draggable {
  boolean dragging = false; // Is the object being dragged?
  boolean rollover = false; // Is the mouse over the ellipse?
  
  float x,y,w,h;          // Location and size
  float offsetX, offsetY; // Mouseclick offset

  Draggable(float tempX, float tempY, float tempW, float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    offsetX = 0;
    offsetY = 0;
  }

  // Method to display
  void display() {
    stroke(0);
    if (dragging) fill (50);
    else if (rollover) fill(100);
    else fill(175,200);
    rect(x,y,w,h);
  }

  // Is a point inside the rectangle (for click)?
  void clicked(int mx, int my) {
    if (mx > x && mx < x + w && my > y && my < y + h) {
      dragging = true;
      // If so, keep track of relative location of click to corner of rectangle
      offsetX = x-mx;
      offsetY = y-my;
    }
  }
  
  // Is a point inside the rectangle (for rollover)
  void rollover(int mx, int my) {
    if (mx > x && mx < x + w && my > y && my < y + h) {
      rollover = true;
    } else {
      rollover = false;
    }
  }

  // Stop dragging
  void stopDragging() {
    dragging = false;
  }
  
  // Drag the rectangle
  void drag(int mx, int my) {
    if (dragging) {
      x = mx + offsetX;
      y = my + offsetY;
    }
  }

}
  • http://projects.nihongoresources.com Mike “Pomax” Kamermans

    Not sure if it’s useful for your clases, but in order to set people up with a basic event/draw tree akin to what they might be used to from Java, I wrote a small framework that plays nice with both Processing and Processing.js, at http://processingjs.nihongoresources.com/framework/framework.php

    It is essentially trivial to add in shape dragging too (add in a markx/marky on mousepresesd, recompute drawable’s x/y based on markx+mousex/marky+mousey during mousedragged, job done)

  • Bill Morgan

    Interesting… For me, this works perfectly in Firefox, OK but jerkily in Chrome, and not at all in Safari.

    Others?

  • Bill Morgan

    BTW, that’s on Mac OS X 10.6.4

  • http://www.learningprocessing.com Daniel Shiffman

    Java applets don’t work particularly well in Chrome so there’s nothing much you can do about that. It works fine for me in Safari, so I’m not sure what the issue is there. I post them as Java applets just for convenience, but if you are looking to use this code online (in particular for Chrome), I’d suggest maybe taking a look processing.js!

    http://processingjs.org/

  • Roberto Festa

    Is it possible to do the same with other shape like lines, arc, curve…

  • Anonymous

    Yes!  You just need to figure out how to determine if the mouse in clicking on the shape.  

  • Thijs Platteau

    How can you make sure you can’t drag the object outside the display?

  • Anonymous
  • Jean-philippe Chatain

    Hello!

    I was wondering if you could help me…
    Do you know a way to have multiple draggable shape in a Java app?
    Thank you by advance for your response!

  • Carlychatterbox

    is there a way to modify the code so you can have multiple different objects each with different classes, colours, shapes, etc……?

  • shiffman

    take a look at the chapter on inheritance.  This would be one technique for building variations based on the draggable shape.