# Drag shape with mouse / Pre-last thread in this week
**URL:** https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176
**Category:** Coding Questions
**Created:** [November 3, 2019, 10:11am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176 "2019-11-03T10:11:38Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)
#### Post date: [November 3, 2019, 10:11am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/1 "2019-11-03T10:11:38Z")
1. Hello! I just want to ask, how can I make that if I drag _ **ANY** _ of the geometric shapes will be where my mouse, and when I release my mouse, it will stay in the place where I dragged it to? Thank you!
Also, when I will get answer to 1. , I want to ask how to do that all of the shapes will fall when I click for example ‘g’.
* * *
CODE FOR BOTH QUESTIONS \>
```auto
import javafx.scene.effect.Bloom;
int playerX = 400;
int playerY = 300;
color col = 0;
color col2 = 0;
color col3 = 0;
color col4 = 0;
color col5 = 0;
color col6 = 0;
int index;
int len;
int randomIndex;
int l = width / 4 ;
int m = height / 2;
int u = width / 6;
int f = height / 6;
color cComp;
String colText = "BLUE > ";
float rx, ry;
int collisionX = 266;
int collisionY = 200;
String randomFun[] = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
String randomInt[] = {"0", "1", "2", "3", "4" , "5", "6", "7", "8", "9"};
void setup() {
surface.setTitle("The Playground!");
index = int(random(randomFun.length));
randomIndex = int(random(randomInt.length));
size(800, 600);
frameRate(320);
col = color (0, 0, 255);
col2 = color(0);
col3 = color(255);
col4 = color(255, 0, 0);
col5 = color(0, 255, 0);
col6 = color(255, 112, 245);
rx = random(800);
ry = random(600);
}
void draw() {
background(255);
strokeWeight(2.877);
keyPressed();
fill(0, 0, 255);
rect(collisionX, collisionY, 100, 100);
fill(col2);
rect(l, m, 20, 20);
fill(col4);
ellipse(u, f, 12, 12);
fill(col5);
ellipse(rx, ry, 70, 70);
noFill();
stroke(0);
fill(255);
ellipse(playerX, playerY, 20, 20);
noFill();
if(playerX > width - 20) {
playerX = width - 20;
}
if(playerX < 10) {
playerX = 10;
}
if(playerY > height - 20) {
playerY = height - 20;
}
if(playerY < 10) {
playerY = 10;
}
// START(())
fill(255, 112, 245);
text("FPS > " + frameRate, CENTER, CENTER + 15);
text("KEY > " + key, CENTER, CENTER + 30);
text("KEY-PRESSED > " + keyPressed, CENTER, CENTER + 45);
text("MOUSE-POSITION-X > " + mouseX, CENTER, CENTER + 60);
text("MOUSE-POSITION-Y > " + mouseY, CENTER, CENTER + 75);
text("MOUSE-CLICKED > " + mousePressed, CENTER, CENTER + 90);
text("KEY-CODE > " + keyCode, CENTER, CENTER + 105);
text("DATE > " + second() + " - " + minute()+ " - " + hour() + " - " + day() + " - " + month() + " - " + year(), CENTER, CENTER + 120);
text("RANDOM-CHARACTER > " + randomFun[index], CENTER, CENTER + 150);
text("RANDOM-INTEGER > " + randomInt[randomIndex], CENTER, CENTER + 165);
if(col == cComp) {
;
fill(0, 0, 255);
text("COL > BLUE ", CENTER, CENTER + 135);
}
if(col2 == cComp) {
;
fill(0);
text("COL > BLACK ", CENTER, CENTER + 135);
}
if(col3 == cComp) {
;
text("COL > WHITE ", CENTER, CENTER + 135);
}
if(col4 == cComp) {
;
fill(255, 0, 0);
text("COL > RED ", CENTER, CENTER + 135);
}
if(col5 == cComp) {
;
fill(0, 255, 0);
text("COL > GREEN ", CENTER, CENTER + 135);
}
if(col6 == cComp) {
;
fill(255, 112, 245);
text("COL > PINK ", CENTER, CENTER + 135);
}
// END(())
}
void keyPressed() {
if(keyPressed == true && key == 'd' || key == 'D') {
playerX = playerX + 1;
}
if(keyPressed == true && key == 'a' || key == 'A') {
playerX = playerX - 1;
}
if(keyPressed == true && key == 's' || key == 'S') {
playerY = playerY + 1;
}
if(keyPressed == true && key == 'w' || key == 'W') {
playerY = playerY - 1;
}
}
void mousePressed() {
cComp = get(pmouseX, pmouseY);
}
```
* * *
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2019, 10:35am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/2 "2019-11-03T10:35:48Z")
For this you‘ll have to do these things :
• Get the Position of the Object
• Get the position of your mouse
• Compare those, to see if they are close enough to say that the mouse is over the shape
• Preferably activate the Drag&Drop when the mouse is held
• Get the Position of the mouse at the target Location (or get it always to have a literal Drag&Drop and not just Click&Place)
• Set the Position of the Object to the position of the mouse (preferably minus the offset from the actual (0,0) of the shape from the position the mouse is clicked
---
### Author:  [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)
#### Post date: [November 3, 2019, 10:39am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/3 "2019-11-03T10:39:12Z")
I know how to do it, but when I click anywhere it will drag it.
I used
if(mouseX \> collisionX) {
collisionX = mouseX;
}
if(mouseX \< collisionX) {
collisionX = mouseX;
}
and same with mouseY and collisionY
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2019, 10:48am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/4 "2019-11-03T10:48:45Z")
Uhm that‘s not Drag&Drop…
It should look something like this :
```auto
PVector boxPos = new PVector(10,10);
PVector boxSize = new PVector(10,10);
void setup() {
}
void draw() {
if (mousePressed) {
if (mouseX > boxPos.x && mouseX < boxPos.x + boxSize.x && mouseY > boxPos.y && mouseY < boxPos.y + boxSize.y) {
boxPos.set(mouseX, mouseY); //you can also subtract the Offset from the origin (boxPos) to your mouse when you First click, if you want
}
}
}
```
In your case boxPos would be the 2 collisionX/Y variables. And boxSize would be 100/100.
---
### Author:  [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)
#### Post date: [November 3, 2019, 10:53am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/5 "2019-11-03T10:53:38Z")
I don’t understand. .
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2019, 10:55am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/6 "2019-11-03T10:55:39Z")
If it‘s about the PVector, that is just a Class that has 3 variables in it (x, y and z). It‘s mainly used to store 2+D coordinates.
Basically boxPos.x = collissionX and boxPos.y = collissionY
---
### Author:  [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)
#### Post date: [November 3, 2019, 10:57am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/7 "2019-11-03T10:57:05Z")
[I’m completely new and I don’t understand .x and .y and boxPos and PVector.](https://discourse.processing.org/t/drag-shape-with-mouse-last-thread-in-this-week/15176/5)
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2019, 11:07am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/8 "2019-11-03T11:07:02Z")
The PVector Class looks internally similar to this :
```auto
class PVector {
float x;
float y;
PVector (float xtemp, float ytemp) {
x = xtemp;
y = ytemp;
}
void set(float xtemp, float ytemp) {
x = xtemp;
y = ytemp;
}
}
```
If you have a PVector like :
```auto
PVector a = new PVector(10,5);
```
then you can do :
```auto
float collissionX = a.x; //10
float collissionY = a.y; //5
```
And with
```auto
a.set(collissionX-1, collissionY+1); //a.x = 9, a.y = 6
```
you can set the PVectors‘ internal variables x and y to (in this case) collissionX and collissionY.
Knowing how to use PVectors is an essential part if you use coordinates (x,y) often. And you do use them pretty much always.
There is much more to do with PVectors, but these are the basics you should really learn about as soon as possible, since they are very easy to remember and will make your Code a lot easier to handle (not needing separate floats for x and y).
---
### Author:  [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)
#### Post date: [November 3, 2019, 11:08am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/9 "2019-11-03T11:08:34Z")
I don’t understand, like how should I make a rectangle that I can drag anywhere? like I don’t understand anything you posted.
How should I learn PVectors?
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2019, 11:13am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/10 "2019-11-03T11:13:53Z")
```auto
PVector boxPos = new PVector(10,10); //is equal to collissionX and collssionY
PVector boxSize = new PVector(10,10); // is the size of the rectangle (in your Code you set it to 100 and 100
void setup() {
size(500,800);
}
void draw() {
if (mousePressed) {
if (mouseX > boxPos.x && mouseX < boxPos.x + boxSize.x && mouseY > boxPos.y && mouseY < boxPos.y + boxSize.y) {
boxPos.set(mouseX, mouseY); //you can also subtract the Offset from the origin (boxPos) to your mouse when you First click, if you want
}
}
}
```
This is literally the Code to move a Box with Drag&Drop anywhere.
boxPos.x is collissionX and boxPos.y is equal to collissionY.
boxSize.x is 100 and boxSize.y is 100 too in your Code.
As for learning PVectors, just Look at the post i Sent that describes the way it works. It‘s literally 2 simple things to remember.
•PVector can contain 2-3 floats that can be accessed by .x, .y and .z
•PVectors can be set with new PVector(10,10); or .set(10,10)
---
### Author:  [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)
#### Post date: [November 3, 2019, 11:16am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/11 "2019-11-03T11:16:19Z")
So I need to make a rect(boxPos.x, boxPos.y, boxSize.x, boxSize.y); ?
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2019, 11:21am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/12 "2019-11-03T11:21:41Z")
Yes and no. You should change your Code, switching the float collisionX and the float collissionY to a PVector collision, but let‘s refrain from that for now.
So for now just use this Code as a reference, but learn PVectors later on :
```auto
float collissionsX = 10;
float collissionsY = 10;
// you set the width and height in your Code as 100 and 100, so i wont define them as a variable
void setup() {
}
void draw() {
if (mousePressed) {
if (mouseX > collissionX && mouseX < collissionX + 100 && mouseY > collissionY && mouseY < collissionY + 100) {
collissionX = mouseX;
collissionY = mouseY;
}
}
}
```
---
### Author:  [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)
#### Post date: [November 3, 2019, 11:33am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/13 "2019-11-03T11:33:29Z")
I can’t drag it to left and up
---
### Author:  [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [November 3, 2019, 11:37am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/14 "2019-11-03T11:37:21Z")
As you are completely new to coding I thoroughly recommend you take a look at the programming section on khan academy which will teach you everything you need to know about objects and PVectors.
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2019, 11:38am UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/15 "2019-11-03T11:38:31Z")
Yeah, that is because the origin is moved to mouse Position… you can simply fix this by setting the origin as -50. or in other words :
```auto
collissionX = mouseX - 50;
collissionY = mouseY - 50;
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 3, 2019, 12:30pm UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/16 "2019-11-03T12:30:15Z")
based on your initial code here you find a version
where you can drag only the blue rectangle.
You can easily add other items.
I tried to change as little as possible.
In my example I marked the relevant parts with `// !!!!!!!!!!!!!!!!!!!!!!!!!`.
**Remark**
As has been said, you should learn to use PVector and classes / objects.
Read the first textual tutorials and the tutorial “`objects`”.
You should also store the items as objects in an array. Or use arrays. See tutorial array.
Please try the examples there. Then you have better ways to program (a broader set of tools and techniques to code something).
Chrisir
```auto
import javafx.scene.effect.Bloom;
int playerX = 400;
int playerY = 300;
color col = 0;
color col2 = 0;
color col3 = 0;
color col4 = 0;
color col5 = 0;
color col6 = 0;
int index;
int len;
int randomIndex;
int l = width / 4 ;
int m = height / 2;
int u = width / 6;
int f = height / 6;
color cComp;
String colText = "BLUE > ";
float rx, ry;
int collisionX = 266;
int collisionY = 200;
String randomFun[] = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
String randomInt[] = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
// Do we have drag and drop at the moment running?
boolean hold = false; // !!!!!!!!!!!!!!!!!!
// which item is dragged?
boolean collisionIsSelected=false; // !!!!!!!!!!!!!!!!!!!!!!!!!
void setup() {
surface.setTitle("The Playground!");
index = int(random(randomFun.length));
randomIndex = int(random(randomInt.length));
size(800, 600);
frameRate(320);
col = color (0, 0, 255);
col2 = color(0);
col3 = color(255);
col4 = color(255, 0, 0);
col5 = color(0, 255, 0);
col6 = color(255, 112, 245);
rx = random(800);
ry = random(600);
}
void draw() {
background(255);
strokeWeight(2.877);
keyPressed();
fill(0, 0, 255);
rect(collisionX, collisionY, 100, 170);
if (hold) { // !!!!!!!!!!!!!!!!!!!!!!!!!
collisionX += mouseX-pmouseX;
collisionY += mouseY-pmouseY;
}
fill(col2);
rect(l, m, 20, 20);
fill(col4);
ellipse(u, f, 12, 12);
fill(col5);
ellipse(rx, ry, 70, 70);
noFill();
stroke(0);
fill(255);
ellipse(playerX, playerY, 20, 20);
noFill();
if (playerX > width - 20) {
playerX = width - 20;
}
if (playerX < 10) {
playerX = 10;
}
if (playerY > height - 20) {
playerY = height - 20;
}
if (playerY < 10) {
playerY = 10;
}
// START(())
fill(255, 112, 245);
text("FPS > " + frameRate, CENTER, CENTER + 15);
text("KEY > " + key, CENTER, CENTER + 30);
text("KEY-PRESSED > " + keyPressed, CENTER, CENTER + 45);
text("MOUSE-POSITION-X > " + mouseX, CENTER, CENTER + 60);
text("MOUSE-POSITION-Y > " + mouseY, CENTER, CENTER + 75);
text("MOUSE-CLICKED > " + mousePressed, CENTER, CENTER + 90);
text("KEY-CODE > " + keyCode, CENTER, CENTER + 105);
text("DATE > " + second() + " - " + minute()+ " - " + hour() + " - " + day() + " - " + month() + " - " + year(), CENTER, CENTER + 120);
text("RANDOM-CHARACTER > " + randomFun[index], CENTER, CENTER + 150);
text("RANDOM-INTEGER > " + randomInt[randomIndex], CENTER, CENTER + 165);
if (col == cComp) {
;
fill(0, 0, 255);
text("COL > BLUE ", CENTER, CENTER + 135);
}
if (col2 == cComp) {
;
fill(0);
text("COL > BLACK ", CENTER, CENTER + 135);
}
if (col3 == cComp) {
;
text("COL > WHITE ", CENTER, CENTER + 135);
}
if (col4 == cComp) {
;
fill(255, 0, 0);
text("COL > RED ", CENTER, CENTER + 135);
}
if (col5 == cComp) {
;
fill(0, 255, 0);
text("COL > GREEN ", CENTER, CENTER + 135);
}
if (col6 == cComp) {
;
fill(255, 112, 245);
text("COL > PINK ", CENTER, CENTER + 135);
}
// END(())
}
void keyPressed() {
if (keyPressed == true && key == 'd' || key == 'D') {
playerX = playerX + 1;
}
if (keyPressed == true && key == 'a' || key == 'A') {
playerX = playerX - 1;
}
if (keyPressed == true && key == 's' || key == 'S') {
playerY = playerY + 1;
}
if (keyPressed == true && key == 'w' || key == 'W') {
playerY = playerY - 1;
}
}
void mousePressed() { // !!!!!!!!!!!!!!!!!!!!!!!!!
cComp = get(pmouseX, pmouseY);
if (mouseX>collisionX &&
mouseY>collisionY &&
mouseX
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 3, 2019, 12:31pm UTC](https://discourse.processing.org/t/drag-shape-with-mouse-pre-last-thread-in-this-week/15176/17 "2019-11-03T12:31:50Z")
It is not necessary to call `keyPressed();` in draw().
Like setup, draw, mousePressed… it gets called automatically.