That is because you are testing mousePressed for button click detection and if the mouse is pressed over one button, it can also be pressed over another button. This results in them locking together in the way that you see.

To fix this, each button should have a boolean holding whether or not the button is being dragged. When you detect if a button is being pressed, you first make sure that no other buttons are being pressed by checking the booleans.

I hope you understand this and that it is helpful.

hi calsign
thanks for the response and I do understand what you are saying. However when you say

each button should have a boolean holding whether or not the button is being dragged

do you mean this should be included in the button's class definition? as i can't think of any other way to implement this and be able to check it's status by means of the name[] array loop within draw(). do you mean

1. boolean mouseDragged(){
       if(myButtonOver ){
         myButtonDragged = true;
         return myButtonDragged;  
       }else{
         myButtonDragged = false;
         return myButtonDragged;
       }
     }   

instead of having the Button.press() method because I tried that and the results where no dragabillity at all.

Wait- you already have a boolean declared.
It's myButtonPressed... When you change that value (in press()) first check to make sure that no other buttons have myButtonPressed set to true.

With the following press() function:

1. boolean press(){
2.     if(myButtonOver  && mousePressed ){
3.       for(int i = 0; i < totBtn; i ++) {
4.         if(name[i].myButtonPressed) {
5.           myButtonPressed = false;
6.           return myButtonPressed;
7.         }
8.       }
9.       myButtonPressed = true;
10.       return myButtonPressed;
11.     }else{
12.       myButtonPressed = false;
13.       return myButtonPressed;
14.     }
15.   }

It is possible to un-drag the buttons, but it's still not working the way you want...

hi
thanks for trying, but it's not really what i'm looking for.

/*Button  Example
 * 
 *  still needs some work
 *  simplify the process of making draggable rectangular buttons.
 * They can be particularly useful for testing code and can also be implemented into final projects.
 */
int total = 4;
// Declare the button instances' variable names here ie. Button buttonVariableName
Button[] myButton = new Button[total];

void setup(){
// buttonVariableName = new Button(color(red, green, blue), buttonXLoc, buttonYLoc, buttonWidth, buttonHeight, instanceName);
  size(300,250);
  background(127);
  for(int i = 0; i < total; i ++){
    myButton[i] = new Button(color(255, 255, 255), 10, 70 + i *40, 200, 40, "buttonName"+i);
  }
}
void draw(){
  background(127);
//  buttonVariableName.disp() draws the button
  for(int i = 0; i < total; i++){
 
 
//  put what ever you want to happen on the button over state here or comment out this code block to ignore over state
  if(myButton[i].over() ){
    fill(255);
    //text("mouse is over button",10,height/2);
    myButton[i].cB = color(255, 0,0);
    //println("mouse is over button");
  }else{
    //text("mouse is not over button",10,height/2);
    myButton[i].cB = color(255);
    //println("mouse is not over button");
  }
  if(myButton[i].draggable){
    myButton[i].xLocB = mouseX - myButton[i].xSizeB/2;
    myButton[i].yLocB = mouseY - myButton[i].ySizeB/2;
  }else{
    myButton[i].xLocB = myButton[i].xLocB;
    myButton[i].yLocB = myButton[i].yLocB;
  }
  myButton[i].disp();
//  buttonVariableName.over() this method determines if the users mouse is over the button
  myButton[i].over();
  }
}

void mousePressed(){
  for(int i = 0; i < total; i++){
  if(myButton[i].myButtonOver){
    println("button is being pressed");
    myButton[i].myButtonPressed = true;
    println(myButton[i].myButtonPressed);
   }
  }
}

void mouseDragged(){
  for(int i = 0; i < total; i++){
  if(myButton[i].myButtonPressed){
    myButton[i].draggable = true;
  }
  }
}

void mouseReleased(){
  for(int i = 0; i < total; i++){
  if(myButton[i].myButtonPressed){
    myButton[i].myButtonPressed = false;
    myButton[i].draggable = false;
    println(myButton[i].myButtonPressed);
   }
  }
}

//definition of the Button class
class Button{
 
//  declare variables used in the Button class here
  color cB;
  float xLocB;
  float yLocB;
  float xSizeB;
  float ySizeB;
  String nameB;
  boolean myButtonOver;
  boolean myButtonPressed;
  boolean draggable;
 
//  Constructor

  Button(color tempcB, float tempxLocB, float tempyLocB, float tempxSizeB, float tempySizeB,String tempNameB){
    cB = tempcB;
    xLocB = tempxLocB;
    yLocB = tempyLocB;
    xSizeB = tempxSizeB;
    ySizeB = tempySizeB;
    nameB = tempNameB;
   
  }

//Methods

//  The disp() method is used to draw the button and text to the screen 
  void disp(){
    fill(cB);
    rect(xLocB, yLocB,xSizeB, ySizeB);
//  This is the drawing of the text with and reassignment of fill to the original value 
    fill(0);
    text(nameB, (xSizeB/2)+xLocB-((xSizeB/2)/2), (ySizeB/2)+yLocB+((ySizeB/2)/2));
    fill(cB);
  }
//   The over() method returns either 1 to indicate mouse is over button or 0 to indicate mouse is outside of button
  boolean over(){
    if(mouseX >= xLocB && mouseX <= xLocB + xSizeB && mouseY >= yLocB && mouseY <= yLocB + ySizeB){
      myButtonOver = true;
      return myButtonOver;
    }else{
      myButtonOver = false;
      return myButtonOver;
      }
  }

}