Drag & Drop

Programming Questions

kblalwani

in Programming Questions • 6 months ago

In my code, i have six images that i want to drag and drop, but i want them to drag and drop separately. Right now when i drag one image all images move simultaneously. Can anyone help me make them drag and drop separately?

Here's the code:

PImage img1;

PImage img;

PImage img2;

PImage img3;

PImage img4;

PImage img5;

PImage img6;

PImage img7;

PImage img8;

PImage img9;

PImage img10;

PImage img11;

PImage img12;

PImage img13;

PImage img14;

PImage img15;

PImage img16;

PImage img17;

PImage img18;

PImage img19;

PImage img20;

PImage img21;

PImage img22;

float rockX;

float rockY;

float rockZ;

float rockW;

float rockA;

float rockB;

float rockC;

float rockD;

float rockE;

float rockF;

float rockG;

float rockH;

float watermelonX;

float watermelonY;

boolean rockDragging;

void setup() {

size (700, 700);

rockX = 150;

rockY = 400;

rockZ = 200;

rockW = 400;

rockA = 250;

rockB = 400;

rockC = 150;

rockD = 370;

rockE = 200;

rockF = 370;

rockG = 250;

rockH = 370;

watermelonX = 250;

watermelonY = 600;

rockDragging = false;

img1 = loadImage("background2.jpg");

img = loadImage("house.png");

img2 = loadImage("watermelon back.png");

img3 = loadImage("rock.png");

img4 = loadImage ("rock2.png");

img5 = loadImage("rock3.png");

img6 = loadImage ("rock4.png");

img7 = loadImage("rock5.png");

img8 = loadImage ("rock6.png");

img9 = loadImage("rock7.png");

img10 = loadImage ("rock8.png");

img11 = loadImage("rock9.png");

img12 = loadImage ("rock10.png");

img13 = loadImage("rock11.png");

img14 = loadImage ("rock12.png");

img15 = loadImage("rock13.png");

img16 = loadImage ("rock14.png");

img17 = loadImage("rock15.png");

img18 = loadImage ("rock16.png");

img19 = loadImage("rock17.png");

img20 = loadImage ("rock18.png");

img21 = loadImage("rock19.png");

img22 = loadImage ("rock20.png");

background (#2BD8ED);

}

void mousePressed()

{

if (mouseInRock (rockX, rockY, 60, 50));

if (mouseInRock (rockZ, rockW, 60, 50));

if(mouseInRock (rockA, rockB, 60, 50));

if (mouseInRock (rockC, rockD, 60, 50));

if (mouseInRock (rockE, rockF, 60, 50));

if (mouseInRock (rockG, rockH, 60, 50));

if (mouseInRock (watermelonX, watermelonY, 150, 80));

rockDragging = true;

}

void mouseReleased()

{

rockDragging = false;

}

void draw() {

//draws the still images

image(img1, 0, 0, 700, 700); //background

image(img, 0, 0, 700, 700); //house

image (img2, watermelonX, watermelonY, 150, 80); //watermelon

//rocks

if (rockDragging) {

rockX = mouseX;

rockY = mouseY;

rockZ = mouseX;

rockW = mouseY;

rockA = mouseX;

rockB = mouseY;

rockC = mouseX;

rockD = mouseY;

rockE = mouseX;

rockF = mouseY;

rockG = mouseX;

rockH = mouseY;

watermelonX = mouseX;

watermelonY = mouseY;

}

image(img3, 0, 400, 300, 300);

image (img4, 50, 400, 300, 300);

image(img5, 100, 400, 300, 300);

image (img6, rockX, rockY, 60, 50);

image(img7, rockZ, rockW, 60, 50);

image (img8, rockA, rockB, 60, 50);

image(img9, 300, 400, 300, 300);

image (img10, 350, 400, 300, 300);

image(img11, 400, 400, 300, 300);

image (img12, 450, 400, 300, 300);

image(img13, 0, 370, 300, 300);

image (img14, 50, 370, 300, 300);

image(img15, 100, 370, 300, 300);

image (img16, rockC, rockD, 60, 50);

image (img17, rockE, rockF, 60, 50);

image(img18, rockG, rockH, 60, 50);

image (img19, 300, 370, 300, 300);

image(img20, 350, 370, 300, 300);

image (img21, 400, 370, 300, 300);

image (img22, 450, 370, 300, 300);

fill (255);

noStroke();

rect (10, 600, 200, 90);

fill (0);

textSize(12);

text("Move the rocks that are", 20, 630);

text("in Watermelon's way,", 20, 645);

text("and then take him", 20, 660);

text("to the neighbor's house.", 20, 675);

}

boolean mouseInRock (float _x, float _y, float _w, float _h) {

if (mouseX > _x && mouseY > _y && mouseX < _x +_w && mouseY < _y + _h) {

return true;

}

return false;

}

Replies(9)

GoToLoop

Re: Drag & Drop

6 months ago

You should really consider using an Array to group same objects under same label!

PhiLho

Re: Drag & Drop

6 months ago

Sure!

kblalwani

Re: Drag & Drop

6 months ago

Thanks guys! I haven't learned about arrays in class, and haven't used them before, but i will read those links and try to use them in my code :)

kblalwani

Re: Drag & Drop

6 months ago

I tried reading about arrays but i don't understand them so much. I tried to use them in my code, but it was confusing and didn't workout. Can anyone help me with this? Thanks!

v.k.

Re: Drag & Drop

6 months ago

what have you tried? Start by making an array of images to hold them all

PImage [] images = new PImage [10];
int index;
//initialize them
void setup(){
for (int i = 0; i < images.length; i++){
String s = "http://www.coloring-pages-kids.com/coloring-pages/educational-coloring-pages/numbers-coloring-pages/simple-numbers-coloring-pages-images/numbers-simple-coloring-page-"+nf(i+1,2)+".gif";
images[i] = loadImage(s);
}
size(images[1].width, images[1].height);
frameRate(5);
}
//display them
void draw(){
image(images[index], 0, 0);
index = (index+1)%images.length;
println(index);
}

kblalwani

Re: Re: Drag & Drop

6 months ago

this is what i tried:

//variables for images

PImage img8;

PImage img9;

PImage [] img = 30

float rockX;

float rockY;

float rockZ;

float rockW;

float rockA;

float rockB;

float rockC;

float rockD;

float rockE;

float rockF;

float rockG;

float rockH;

float watermelonX;

float watermelonY;

boolean rockDragging;

void setup() {

size (700, 700);

rockX = 150;

rockY = 400;

rockZ = 200;

rockW = 400;

rockA = 250;

rockB = 400;

rockC = 150;

rockD = 370;

rockE = 200;

rockF = 370;

rockG = 250;

rockH = 370;

watermelonX = 250;

watermelonY = 600;

rockDragging = false;

//images

img8 = loadImage("background2.jpg");

img9 = loadImage("house.png");

img [10] = loadImage("watermelon back.png");

img [11] = loadImage("rock.png");

img [12] = loadImage ("rock2.png");

img [13] = loadImage("rock3.png");

img [14] = loadImage ("rock4.png");

img [15]= loadImage("rock5.png");

img [16] = loadImage ("rock6.png");

img [17]= loadImage("rock7.png");

img [18] = loadImage ("rock8.png");

img [19] = loadImage("rock9.png");

img [20] = loadImage ("rock10.png");

img [21] = loadImage("rock11.png");

img [22] = loadImage ("rock12.png");

img [23] = loadImage("rock13.png");

img [24] = loadImage ("rock14.png");

img [25] = loadImage("rock15.png");

img [26] = loadImage ("rock16.png");

img [27] = loadImage("rock17.png");

img [28] = loadImage ("rock18.png");

img [29] = loadImage("rock19.png");

img [30] = loadImage ("rock20.png");

background (#2BD8ED);

void draw() {

//draws the still images

image(img8, 0, 0, 700, 700); //background

image(im9, 0, 0, 700, 700); //house

image (img [10], watermelonX, watermelonY, 150, 80); //watermelon

//rocks

if (rockDragging) {

rockX = mouseX;

rockY = mouseY;

rockZ = mouseX;

rockW = mouseY;

rockA = mouseX;

rockB = mouseY;

rockC = mouseX;

rockD = mouseY;

rockE = mouseX;

rockF = mouseY;

rockG = mouseX;

rockH = mouseY;

watermelonX = mouseX;

watermelonY = mouseY;

}

image(img [11], 0, 400, 300, 300);

image (img [12], 50, 400, 300, 300);

image(img [13], 100, 400, 300, 300);

image (img [14], rockX, rockY, 60, 50);

image(img [15], rockZ, rockW, 60, 50);

image (img [16],, rockA, rockB, 60, 50);

image(img [17],, 300, 400, 300, 300);

image (img [18],, 350, 400, 300, 300);

image(img [19], 400, 400, 300, 300);

image (img [20], 450, 400, 300, 300);

image(img [21], 0, 370, 300, 300);

image (img [22], 50, 370, 300, 300);

image(img [23], 100, 370, 300, 300);

image (img [24], rockC, rockD, 60, 50);

image (img [25], rockE, rockF, 60, 50);

image(img [26], rockG, rockH, 60, 50);

image (img [27], 300, 370, 300, 300);

image(img [28], 350, 370, 300, 300);

image (img [29], 400, 370, 300, 300);

image (img [30], 450, 370, 300, 300);

fill (255);

noStroke();

rect (10, 600, 200, 90);

fill (0);

textSize(12);

text("Move the rocks that are", 20, 630);

text("in Watermelon's way,", 20, 645);

text("and then take him", 20, 660);

text("to the neighbor's house.", 20, 675);

}

void mousePressed()

{

if (mouseInRock (rockX, rockY, 60, 50));

if (mouseInRock (rockZ, rockW, 60, 50));

if(mouseInRock (rockA, rockB, 60, 50));

if (mouseInRock (rockC, rockD, 60, 50));

if (mouseInRock (rockE, rockF, 60, 50));

if (mouseInRock (rockG, rockH, 60, 50));

if (mouseInRock (watermelonX, watermelonY, 150, 80));

rockDragging = true;

}

void mouseReleased()

{

rockDragging = false;

}

boolean mouseInRock (float _x, float _y, float _w, float _h) {

if (mouseX > _x && mouseY > _y && mouseX < _x +_w && mouseY < _y + _h) {

return true;

}

return false;

}

PhiLho

Re: Drag & Drop

6 months ago

PImage [] img = 30
Bad start, see the syntax given by v.k. (the first line).
Not sure why you don't use the array from the start.
And the rock<some random letter> variables should be arrays too.
The interest is to use loops to iterate on arrays, otherwise there is no improvement...

Back to your question, you need to stop checking the other rocks when one of them is dragged. A boolean variable might help here.

v.k.

Re: Drag & Drop

6 months ago

I think is usually good to isolate problems in the code, so I made you an example using rects, instead of images, the principle is the same still lacking a better handle for overlapping shapes. Check it out :)

edit: the fun about arrays is that from 4 to 40 is just one change :) try DragMe[] drags = new DragMe[40]; for instance. Also edited the code a bit.

DragMe[] drags = new DragMe[4];
void setup() {
size(400, 400);
for (int i = 0; i < drags.length; i++) {
drags[i] = new DragMe();
}
}
void draw() {
background(255);
for (int i = 0; i < drags.length; i++) {
drags[i].display();
drags[i].update();
}
}
void mousePressed() {
for (int i = 0; i < drags.length; i++) {
if (!drags[i].isOver())
drags[i].dontMove = true;
drags[i].offset_x = mouseX - drags[i].pos_x;
drags[i].offset_y = mouseY - drags[i].pos_y;
}
}
void mouseReleased() {
for (int i = 0; i < drags.length; i++) {
drags[i].locked = false;
drags[i].dontMove = false;
}
}
class DragMe {
float pos_x, pos_y, SIZE = 20;
float prev_x, prev_y;
boolean locked;
boolean dontMove;
color c = color (0, 170, 170);
float offset_x, offset_y;
DragMe() {
pos_x = random(width-SIZE);
pos_y = random(height-SIZE);
}
void update() {
if (isOver() && !locked && !dontMove || locked && !dontMove )
c = color (170);
else
c = color (0, 170, 170);
if (isClicked()) {
locked = true;
}
if (locked && !dontMove) {
pos_x = mouseX - offset_x;
pos_y = mouseY - offset_y;
}
}
void display() {
fill(c);
rect(pos_x, pos_y, SIZE, SIZE);
}
boolean isOver() {
float right_x = pos_x + SIZE;
float bottom_y = pos_y + SIZE;
return mouseX >= pos_x && mouseX <= right_x &&
mouseY >= pos_y && mouseY <= bottom_y;
}
boolean isClicked() {
return isOver() && mousePressed && !dontMove;
}
}

kblalwani

Re: Re: Drag & Drop

6 months ago

Tried that with the images but it wouldn't work! but i found another way and fixed it :) But thankyou so much :)

//variables for images in page 2

PImage img8;

PImage img9;

PImage img10;

PImage img11;

PImage img12;

PImage img13;

PImage img14;

PImage img15;

PImage img16;

PImage img17;

PImage img18;

PImage img19;

PImage img20;

PImage img21;

PImage img22;

PImage img23;

PImage img24;

PImage img25;

PImage img26;

PImage img27;

PImage img28;

PImage img29;

PImage img30;

float rockX;

float rockY;

float rockZ;

float rockW;

float rockA;

float rockB;

float rockC;

float rockD;

float rockE;

float rockF;

float rockG;

float rockH;

float watermelonX;

float watermelonY;

boolean rockDraggingX;

boolean rockDraggingZ;

boolean rockDraggingA;

boolean rockDraggingC;

boolean rockDraggingE;

boolean rockDraggingG;

boolean watermelonDragging;

void setup() {

size (700, 700);

rockX = 150;

rockY = 400;

rockZ = 200;

rockW = 400;

rockA = 250;

rockB = 400;

rockC = 150;

rockD = 370;

rockE = 200;

rockF = 370;

rockG = 250;

rockH = 370;

watermelonX = 250;

watermelonY = 600;

rockDraggingX = false;

rockDraggingZ = false;

rockDraggingA = false;

rockDraggingC = false;

rockDraggingE = false;

rockDraggingG = false;

watermelonDragging = false;

//images

img8 = loadImage("background2.jpg");

img9 = loadImage("house.png");

img10 = loadImage("watermelon back.png");

img11= loadImage("rock.png");

img12 = loadImage ("rock2.png");

img13 = loadImage("rock3.png");

img14 = loadImage ("rock4.png");

img15 = loadImage("rock5.png");

img16 = loadImage ("rock6.png");

img17 = loadImage("rock7.png");

img18 = loadImage ("rock8.png");

img19 = loadImage("rock9.png");

img20 = loadImage ("rock10.png");

img21 = loadImage("rock11.png");

img22 = loadImage ("rock12.png");

img23 = loadImage("rock13.png");

img24 = loadImage ("rock14.png");

img25 = loadImage("rock15.png");

img26 = loadImage ("rock16.png");

img27 = loadImage("rock17.png");

img28 = loadImage ("rock18.png");

img29 = loadImage("rock19.png");

img30 = loadImage ("rock20.png");

background (#2BD8ED);

}

void mousePressed()

{

if (mouseInRock (rockX, rockY, 60, 50)) {

rockDraggingX = true;

}

if (mouseInRock (rockZ, rockW, 60, 50)) {

rockDraggingZ = true;

}

if (mouseInRock (rockA, rockB, 60, 50)) {

rockDraggingA = true;

}

if (mouseInRock (rockC, rockD, 60, 50)){

rockDraggingC = true;

}

if (mouseInRock (rockE, rockF, 60, 50)){

rockDraggingE = true;

}

if (mouseInRock (rockG, rockH, 60, 50)){

rockDraggingG = true;

}

if (mouseInRock (watermelonX, watermelonY, 150, 80)){

watermelonDragging = true;

}

void mouseReleased()

{

rockDraggingX = false;

rockDraggingZ = false;

rockDraggingA = false;

rockDraggingC = false;

rockDraggingE = false;

rockDraggingG = false;

watermelonDragging = false;

}

void draw() {

//draws the still images

image(img8, 0, 0, 700, 700); //background

image(img9, 0, 0, 700, 700); //house

//dragging

if (rockDraggingX) {

rockX = mouseX;

rockY = mouseY;

}

if (rockDraggingZ) {

rockZ = mouseX;

rockW = mouseY;

}

if (rockDraggingA) {

rockA = mouseX;

rockB = mouseY;

}

if (rockDraggingC) {

rockC = mouseX;

rockD = mouseY;

}

if (rockDraggingE) {

rockE = mouseX;

rockF = mouseY;

}

if (rockDraggingX) {

rockX = mouseX;

rockY = mouseY;

}

if (rockDraggingG) {

rockG = mouseX;

rockH = mouseY;

}

if (watermelonDragging) {

watermelonX = mouseX;

watermelonY = mouseY;

}

//rocks

image(img11, 0, 400, 300, 300);

image (img12, 50, 400, 300, 300);

image(img13, 100, 400, 300, 300);

image (img14, rockX, rockY, 60, 50);

image(img15, rockZ, rockW, 60, 50);

image (img16, rockA, rockB, 60, 50);

image(img17, 300, 400, 300, 300);

image (img18, 350, 400, 300, 300);

image(img19, 400, 400, 300, 300);

image (img20, 450, 400, 300, 300);

image(img21, 0, 370, 300, 300);

image (img22, 50, 370, 300, 300);

image(img23, 100, 370, 300, 300);

image (img24, rockC, rockD, 60, 50);

image (img25, rockE, rockF, 60, 50);

image(img26, rockG, rockH, 60, 50);

image (img27, 300, 370, 300, 300);

image(img28, 350, 370, 300, 300);

image (img29, 400, 370, 300, 300);

image (img30, 450, 370, 300, 300);

//watermelon

image (img10, watermelonX, watermelonY, 150, 80);

fill (255);

noStroke();

rect (10, 600, 200, 90);

fill (0);

textSize(12);

text("Move the rocks that are", 20, 630);

text("in Watermelon's way,", 20, 645);

text("and then take him", 20, 660);

text("to the neighbor's house.", 20, 675);

}

boolean mouseInRock (float _x, float _y, float _w, float _h) {

if (mouseX > _x && mouseY > _y && mouseX < _x +_w && mouseY < _y + _h) {

return true;

}

return false;

}

Top Reply

Drag & Drop

Replies(9)

Re: Drag & Drop

Re: Drag & Drop

Re: Drag & Drop

Re: Drag & Drop

Re: Drag & Drop

Re: Re: Drag & Drop

Re: Drag & Drop

Re: Drag & Drop

Re: Re: Drag & Drop

Statistics

Tags

Actions

Related Posts