# Clicking and dragging an image
**URL:** https://discourse.processing.org/t/clicking-and-dragging-an-image/43403
**Category:** Libraries
**Created:** [December 6, 2023, 12:05am UTC](https://discourse.processing.org/t/clicking-and-dragging-an-image/43403 "2023-12-06T00:05:44Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@lib](https://discourse.processing.org/u/lib)
#### Post date: [December 6, 2023, 12:05am UTC](https://discourse.processing.org/t/clicking-and-dragging-an-image/43403/1 "2023-12-06T00:05:44Z")
So I have a lot of images set up that change slightly with a mouse press (it’s like a day to night party scene) and I have an image of a person I made that I want to be able to click and drag along one x-axis line… any help would be much appreciated
Basically I want it to be so the image stays on the same x axis, but wherever the mouse is when pressed down is where the person will go
Here’s what I’ve got if that helps: (it’s also set up so I can add music later but I haven’t yet)
```auto
PImage alamo, buildings, flag, line, tower, Alamo, Buildings, cart, coaster, Flag, papel, moon, person;
//Declare a variable of the type PImage
import ddf.minim.*;
Minim minim;
AudioPlayer player;
AudioInput input;
void setup(){
size(1000,700);
alamo = loadImage("Alamo day.png");
buildings = loadImage("buildings day.png");
flag = loadImage("flag.png");
line = loadImage("skyline.png");
tower = loadImage("tower day.png");
Alamo = loadImage("Alamo night.png");
Buildings = loadImage("buildings night.png");
cart = loadImage("cart.png");
coaster = loadImage("coaster day.png");
Flag = loadImage("flag night.png");
papel = loadImage("papel.png");
moon = loadImage("moon.png");
person = loadImage("person.png");
/// minim = new Minim(this);
// player = minim.loadFile("squirt.wav");
// input = minim.getLineIn();
}
void draw(){
background (210, 201, 201);
if (mousePressed == true){
image (tower, 450,175);
image (Alamo, 67,462);
image (Buildings, 272,285);
image (coaster, 550, 100);
image (Flag, 32, 550);
image (papel, 0,5);
image (line, 0, 600);
image (cart, 700, 295);
image (moon, 45, 200);
image (person, 45, 450);
}else{
image (flag, 32,550);
image (line, 0, 600);
image (coaster, 550, 100);
image (alamo, 67, 462);
image (buildings, 272, 285);
image (tower, 450,175);
}
}
```
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [December 6, 2023, 5:55am UTC](https://discourse.processing.org/t/clicking-and-dragging-an-image/43403/2 "2023-12-06T05:55:15Z")
Hi @lib,
Not getting it 100% what you want, but let’s start by changing this line
> `image (person, 45, 450);`
to
> `image (person, mouseX, 450);`
Cheers
— mnse
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 6, 2023, 7:02am UTC](https://discourse.processing.org/t/clicking-and-dragging-an-image/43403/3 "2023-12-06T07:02:22Z")
> [@lib](#):
>
> I want it to be so the image stays on the same x axis, but wherever the mouse is when pressed down is where the person will go
Take a look at the scroll bar example. You may be able to adapt elements from that example for your project.
Reference:
> **[Examples](https://processing.org/examples/)**
>
> Short, prototypical programs exploring the basics of programming with Processing.
Interactivity tutoiral:
> **[Interactivity](https://processing.org/tutorials/interactivity/)**
>
> Introduction to interactivity with the mouse and keyboard.
`:)`
---
### Author:  [@lib](https://discourse.processing.org/u/lib)
#### Post date: [December 6, 2023, 10:12am UTC](https://discourse.processing.org/t/clicking-and-dragging-an-image/43403/4 "2023-12-06T10:12:19Z")
That’s exactly what I wanted thank you!!
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 6, 2023, 1:01pm UTC](https://discourse.processing.org/t/clicking-and-dragging-an-image/43403/5 "2023-12-06T13:01:01Z")
> [@lib](#):
>
> Basically I want it to be so the image stays on the same x axis, but wherever the mouse is when pressed down is where the person will go
This example moves a text (replace it with image) when you press the mouse.
It uses easing so that the text does not jump there but moves there slowly.
A link to describe this can be found in the code.
Chrisir
```auto
boolean moves=false;
float mousePosDesired; // stored as target when the mouse is clicked
float posFromMouseUsedForDisplaying=height/2; // current text pos
float easing = 0.05; // speed
void setup() {
size(560, 360);
}
void draw() {
background(0);
// text / image
text("person\nimage", width/2, posFromMouseUsedForDisplaying);
// if mouse was clicked, we move
if (moves) {
// moves with easing, https://processing.org/examples/easing.html
float dx = mousePosDesired - posFromMouseUsedForDisplaying;
posFromMouseUsedForDisplaying += dx * easing;
if (dist(0, posFromMouseUsedForDisplaying, 0, mousePosDesired) < 0.1) {
// stop movement
posFromMouseUsedForDisplaying=mousePosDesired;
moves=false;
}
}
}
// ------------------------------------------------------------------
void mousePressed () {
moves=true; // start moving
mousePosDesired=mouseY; // store as target when the mouse is clicked
}
```