# Help with dragging images!

**URL:** <https://discourse.processing.org/t/help-with-dragging-images/33661>\
**Category:** Coding Questions\
**Created:** [November 22, 2021, 3:47am UTC](https://discourse.processing.org/t/help-with-dragging-images/33661 "2021-11-22T03:47:54Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 22, 2021, 8:21pm UTC](https://discourse.processing.org/t/help-with-dragging-images/33661/2 "2021-11-22T20:21:34Z")

</div>

this will work better when you

- keep your images in an array (instead of single)
- keep your positions of the images stored as variable (also in 2 arrays). Otherwise you cannot change the position when dragging, you need to store and change the position

You have 3 parallel arrays: data

- for image 0 are in slot 0 of farm\_images, x, and y array
- for image 1 are in slot 1 of farm\_images, x, and y array
- and so on

**What’s going on**

Then the dragging is easy (and changing of images):

- dragging starts with mousePressed: we search the clicked image and store its number in `selected `. We set a marker `hold` to true so we know, we drag the mouse.  
During hold is true, a red corner is shown (in draw()). Also the position of the `selected ` image is changed (in draw()).

- dragging ends with mouseReleased(). We set hold to false.

- The function mouseClicked is called when we release the mouse immediately. We swap an image. Not sure what you want to happen here.

**Tricks used**

- A trick is to use `return` to leave a function immediately.
- This ` for (PImage pg : farm_images) {` is a short form of a for-loop. It loops over all images in the array and in each loop one image is loaded in to pg, then the next and so on.

Welcome to the forum!

Great to have you here!

Warm regards,

Chrisir

```auto
boolean hold=false; 
int selected = -1; 

PImage bg;
PImage shoe;

PImage[] farm_images = new PImage[4];
float[] x = { 100, 
  300, 
  600, 
  800
};

float[] y = { 100, 
  200, 
  300, 
  400
};

void setup() {
  size(1366, 768);

  // bg = loadImage("Farm animation.png");
  // shoe = loadImage("Shoe.png");
  farm_images[0] = loadImage("Plant top1.jpg");
  farm_images[1] = loadImage("Plant top2.jpg");
  farm_images[2] = loadImage("Plant top3.jpg");
  farm_images[3] = loadImage("Plant top4.jpg");

  //background (bg);
}

void draw() {
  background (0); // background (bg);

  // display 
  int i=0; 
  for (PImage pg : farm_images) {
    // selected image gets a red corner 
    if (i==selected && hold) {
      fill(255, 0, 0); 
      rect(x[i]-5, y[i]-5, 100, 100);
    }//if 
    //display image
    image (pg, x[i], y[i]);
    i++;
  }

  // drag: 
  if (hold) {
    // drag 
    if (selected<0)return; 
    x[selected]+=(mouseX-pmouseX);
    y[selected]+=(mouseY-pmouseY);
  }
}

// -----------------------------------------------

void mouseClicked() {
  // replace image with another
  hold=false;

  int i=0; 
  for (PImage pg : farm_images) {
    if (mouseX > x[i] && 
      mouseX < x[i] + pg.width &&
      mouseY > y[i] && 
      mouseY < y[i]+pg.height) {
      //
      farm_images[i] = farm_images[0]; // eg 0 OR loadImage  
      return;
    }//if 
    i++;
  }//for
}

void mousePressed() {
  // search image for drag and drop (start drag)
  int i=0; 
  for (PImage pg : farm_images) {
    if (mouseX > x[i] && 
      mouseX < x[i] + pg.width &&
      mouseY > y[i] && 
      mouseY < y[i]+pg.height) {
      //
      selected = i;
      hold=true;
      return;
    }//if 
    i++;
  }//for
}

void mouseReleased() {
  // stop drag
  hold=false;
}
//

```

---

_[View the full topic](https://discourse.processing.org/t/help-with-dragging-images/33661)._