We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › fixing draggable boxes
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
fixing draggable boxes (Read 1384 times)
burndttoast
fixing draggable boxes
May 28th, 2010, 4:25pm  
I'm working on getting boxes to be draggable, and it works for the most part, except when the cursor gets within the bounds of another box.  When that happens, that box snaps to the other.  Run the code to see what I mean.  I know where the problem is, but for some reason I'm having a hard time figuring out a solution--and I'm sure it's obvious too.

The problem is that I call a function to draw each box every time, and so it loops over all the boxes and doesn't differentiate between them, and thus it's like all the boxes are selected and aren't differentiated after mousePressed.  I thought about sticking the boxes itself into an array or hashmap, but I don't really see a clear solution there either.  It'd be nice to be able to be have the boxes overlap one another, with the last one drawn on top, but I'll take what I can get.

Here's my code.  Thanks for any and all help.  I really appreciate it.

Code:

Drag thing1, thing2, thing3;
int newx, newy;
boolean start;

void setup(){
  size(900, 675);
  background(0);
  thing1 = new Drag(400,100);
  thing2 = new Drag(100,100);
  thing3 = new Drag(100,350);
}

void draw(){
  background(0);
  drawbox(thing2, 100, "two"); //light grey
  drawbox(thing1, 50, "one"); //dark grey
  drawbox(thing3, 255, "three"); //white
}

void drawbox(Drag item, int fillColor, String name){
  item.square(fillColor);
  mouseDragged(item, name);

  if(start==false && mousePressed==false){
    start=true; 
  }
}

void mouseDragged(Drag item, String name){
  if(mouseX > item.getx() && mouseX < item.getx()+200 &&
    mouseY > item.gety() && mouseY < item.gety()+200){
    if(start==true){
      newx = mouseX - item.getx();
      newy = mouseY - item.gety();
      start=false;
    }
    item.setx(mouseX-newx);
    item.sety(mouseY-newy);
  }
}

class Drag{
  int x, y;

  Drag(int coordx, int coordy){
    x = coordx;
    y = coordy;
  }

  int getx(){
    return x; }  
  int gety(){
    return y; }

  void setx(int passedx){
    x = passedx;  
  }
  void sety(int passedy){
    y = passedy;  
  }

  void square(int fillColor){
    fill(fillColor);
    rect(x, y, 200,200); 
  }
}
Back to top
 
 
blindfish
Re: fixing draggable boxes
Reply #1 - May 29th, 2010, 1:36am  
You need to store the currently dragged item in a variable and check against this when running the mouseDragged code...  However, you need to populate the variable before dragging has begun.  You can use mousePressed to achieve this:

Code:
Drag thing1, thing2, thing3;
// variable to store currently dragged item
Drag draggedItem;

int newx, newy;
boolean start;

void setup(){
  size(900, 675);
  background(0);
  thing1 = new Drag(400,100);
  thing2 = new Drag(100,100);
  thing3 = new Drag(100,350);
}

void draw(){
  background(0);
  drawbox(thing2, 100, "two"); //light grey
  drawbox(thing1, 50, "one"); //dark grey
  drawbox(thing3, 255, "three"); //white
}

void drawbox(Drag item, int fillColor, String name){
  item.square(fillColor);
  mouseDragged(item, name);

  if(start==false && mousePressed==false){
    start=true; 
  }
}

void mousePressed() {
  checkBounds(thing1);
  checkBounds(thing2);
  checkBounds(thing3);
}

Boolean checkBounds(Drag item) {
   if(mouseX > item.getx() && mouseX < item.getx()+200 && mouseY > item.gety() && mouseY < item.gety()+200 ){
      draggedItem = item;
      return true;
    }
    else {
     return false; 
    }
}

void mouseDragged(Drag item, String name){
  if(mouseX > item.getx() && mouseX < item.getx()+200 &&
    mouseY > item.gety() && mouseY < item.gety()+200 && draggedItem == item){
    if(start==true){
      newx = mouseX - item.getx();
      newy = mouseY - item.gety();
      start=false;
    }
    item.setx(mouseX-newx);
    item.sety(mouseY-newy);
  }
}

class Drag{
  int x, y;

  Drag(int coordx, int coordy){
    x = coordx;
    y = coordy;
  }

  int getx(){
    return x; }  
  int gety(){
    return y; }

  void setx(int passedx){
    x = passedx;  
  }
  void sety(int passedy){
    y = passedy;  
  }

  void square(int fillColor){
    fill(fillColor);
    rect(x, y, 200,200); 
  }
}


Strictly speaking you might want to empty the draggedItem variable on mouseReleased (i.e. draggedItem = null).  You're also likely to want to store your objects in an array or ArrayList as this will make it easier to work with multiple objects.  For example, the checkBounds routine could have been incorporated into a for loop iterating over the array within mousePressed().

Another interesting possibility is building mouse events into your class using registerMouseEvent.  I've used that a lot (e.g. here) and find it rather useful.
Back to top
 
Where is the what if the what is in why?
 
burndttoast
Re: fixing draggable boxes
Reply #2 - Jun 2nd, 2010, 4:01pm  
Whoa thanks a ton for the help!  I stuck the Drag objects into a vector so now mousePressed() is going through all of them in a for-loop.  Thank you very much again for that.
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›