Element jumps around when Dragged. What am I doing wrong ?

Programming Questions

goodthink

Element jumps around when Dragged. What am I doing wrong ?

in Programming Questions • 2 years ago

When I drag the square shown in the code sample below, the square jumps around instead of aligning its position to the current mouse position.

posX = mouseX-posX+mouseX;

posY = mouseY-posY+mouseY;

are my attempt, to position the element at the position, where the user actually clicked the square rather then just drawing the square at the current mouse position such as,

posX = mouseX;

posY = mouseX;

I would be very thankful for any help,

int posX = 20; // X Position of square
int posY = 20; // Y Position of square
int widthX = 20; // X Position of square
int heightY = 20;
boolean dragg = false;
void setup(){
size(100,100);
background(0);
stroke(255);
}
void draw(){
if(dragg == true){
background(255);
stroke(0);
}
rect(posX,posY,20,20);
}
void mousePressed(){
if(mouseX >= posX && mouseX <= posX + widthX && mouseY >= posY && mouseY <= posY + heightY){
print(mouseX);
print(" : ");
println(mouseY);
dragg = true;
background(100,100,100);
}
else{
dragg = false;
background(0);
print(dragg);
}
}
void mouseDragged(){
if(dragg == true){
posX = mouseX-posX+mouseX;
posY = mouseY-posY+mouseY;
}
}

Replies(2)

PhiLho

Re: Element jumps around when Dragged. What am I doing wrong ?

2 years ago

You have to get the offset at the start of the drag operation, when mouse is pressed. It shouldn't change later:

int deltaX, deltaY;
void mousePressed(){
if(mouseX >= posX && mouseX <= posX + widthX && mouseY >= posY && mouseY <= posY + heightY){
print(mouseX);
print(" : ");
println(mouseY);
dragg = true;
background(100,100,100);
deltaX = mouseX - posX;
deltaY = mouseY - posY;
}
else{
dragg = false;
background(0);
print(dragg);
}
}
void mouseDragged(){
if(dragg == true){
posX = mouseX - deltaX;
posY = mouseY - deltaY;
}
}

goodthink

Re: Element jumps around when Dragged. What am I doing wrong ?

2 years ago

Thank you so much.

This works perfectly.

int posX = 20;   // X Position of square
int posY = 20;   // Y Position of square

int widthX = 20; // X Position of square
int heightY = 20;

boolean dragg = false;

void setup(){

size(100,100);
background(0);
stroke(255);

}

void draw(){
if(dragg == true){
    background(255);
    stroke(0);
}
rect(posX,posY,20,20);

}

int deltaX, deltaY;

void mousePressed(){

if(mouseX >= posX && mouseX <= posX + widthX && mouseY >= posY && mouseY <= posY + heightY){
    print(mouseX);
    print("   :   ");
    println(mouseY);
    dragg = true;
    background(100,100,100);
    deltaX = mouseX - posX;
    deltaY = mouseY - posY;
}
else{
    dragg = false;
    background(0);
    print(dragg);
}

}

void mouseDragged(){
if(dragg == true){

    posX = mouseX - deltaX;
    posY = mouseY - deltaY;

}
}

Top Reply