# Drag and drop each shape of PGraphics

**URL:** <https://discourse.processing.org/t/drag-and-drop-each-shape-of-pgraphics/33622>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [November 19, 2021, 4:29pm UTC](https://discourse.processing.org/t/drag-and-drop-each-shape-of-pgraphics/33622 "2021-11-19T16:29:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rism](https://avatars.discourse-cdn.com/v4/letter/r/ecccb3/32.png) [@rism](https://discourse.processing.org/u/rism)\
**Post date:** [November 19, 2021, 4:29pm UTC](https://discourse.processing.org/t/drag-and-drop-each-shape-of-pgraphics/33622/1 "2021-11-19T16:29:57Z")

</div>

Hi, I am trying to drag and drop each square rather than the all of the squares when ‘x’ is pressed.  
Do I need to include a for or while loop somewhere?

```auto
PGraphics squares;

float bx;
float by;

boolean locked = false;

float xOffset = 0.0; 
float yOffset = 0.0; 

void setup(){
  size (600, 300);
  background(0);
         
  squares = createGraphics(displayWidth, displayHeight);
}

void draw (){
  background(0);
  image(squares, bx, by);
}

void mousePressed() {
  locked = true; 
    
  xOffset = mouseX-bx; 
  yOffset = mouseY-by; 
}

void mouseDragged(){
  if(locked) {
      bx = mouseX-xOffset; 
      by = mouseY-yOffset; 
  }  
}

void mouseReleased() {
  locked = false;
}

void keyPressed (){
  if (key == 'x'){
    squares.beginDraw();
    squares.fill(160, 82, 45, random(0, 255));
    squares.noStroke();
    squares.square(random(width), random(height), random(500));
    squares.endDraw();
  }
}

```