i am trying to drag and drop an image of a card on the canvas of the javascript but the mouseup event does not seem to be working even though it is inside the main(). Once the card is selected, it follows around the mouse but it does not seem to let go when i let go of the mouse. I also know that the image is repeated from not clearing the screen.

function main(){
var ctx = cvs.getContext("2d");
var img = new Image();
img.src = "allcards.png";
var imgX = 75;
var imgY = 75;
draw();

function draw(){
    ctx.drawImage(img,0,0,97,129,imgX,imgY,100,100);    
}

cvs.addEventListener("mouseup", function(ev){
        greaterX = false;
        lessX = false;
        greaterY = false;
        lessY = false;
    }
);

cvs.addEventListener("mousedown", function(ev){
        if(ev.clientX <= (imgX + 97)){
            var greaterX = true;
        }
        if(ev.clientY <= (imgY + 129)){
            var greaterY = true;
        }
        if(ev.clientX >= imgX){
            var lessX = true;
        }
        if(ev.clientY >= imgY){
            var lessY = true;
        }
        if(greaterX == true)
            if(greaterY == true)
                if(lessX == true)
                    if(lessY == true)
                        cvs.addEventListener("mousemove", function(ev){
                            var offsetX = (ev.clientX - imgX);
                            var offsetY = (ev.clientY - imgY);
                            imgX = imgX + offsetX;
                            imgY = imgY + offsetY;
                            draw();
                        });
    });
};

i am trying to drag and drop an image of a card on the canvas of the javascript but the mouseup event does not seem to be working even though it is inside the main(). Once the card is selected, it follows around the mouse but it does not seem to let go when i let go of the mouse. I also know that the image is repeated from not clearing the screen.

function main(){
var ctx = cvs.getContext("2d");
var img = new Image();
img.src = "allcards.png";
var imgX = 75;
var imgY = 75;
draw();

function draw(){
    ctx.drawImage(img,0,0,97,129,imgX,imgY,100,100);    
}

cvs.addEventListener("mouseup", function(ev){
        greaterX = false;
        lessX = false;
        greaterY = false;
        lessY = false;
    }
);

cvs.addEventListener("mousedown", function(ev){
        if(ev.clientX <= (imgX + 97)){
            var greaterX = true;
        }
        if(ev.clientY <= (imgY + 129)){
            var greaterY = true;
        }
        if(ev.clientX >= imgX){
            var lessX = true;
        }
        if(ev.clientY >= imgY){
            var lessY = true;
        }
        if(greaterX == true)
            if(greaterY == true)
                if(lessX == true)
                    if(lessY == true)
                        cvs.addEventListener("mousemove", function(ev){
                            var offsetX = (ev.clientX - imgX);
                            var offsetY = (ev.clientY - imgY);
                            imgX = imgX + offsetX;
                            imgY = imgY + offsetY;
                            draw();
                        });
    });
};

• javascript
• canvas

• 1 Can't you use JQuery?? it'll handle all he glue code for you: jqueryui./demos/draggable – Frank Orellana Commented Aug 28, 2012 at 3:27
• @Lando OP is using Canvas and the Image that is being placed on the screen is created with code only. jQuery DOM selectors would be of no help. – Polyov Commented Aug 28, 2012 at 3:41

1 Answer 1

greaterX, lessX, etc, are all defined with var inside of your mousedown function, meaning their scope is limited to the mousedown function only.

Therefore, it is useless to try and set them back to false inside of your mouseup function. You need to declare your variables in the main part of your function:

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

Now, simply setting greaterX, lessX, etc back to false is not enough, because the mousemove event checker inside of mousedown is still active. When you apply an event listener, it stays there until you remove it.

So, the next step is to separate the mousemove event function into it's own function (I used "mouseMoveHandler" for the name) and remove the event listener using .removeEventListener(type, listener, useCapture) inside of mouseup.

The mousemove function:

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

The mousedown function (important part):

  if (greaterX === true) { //you need the brackets for multi-line if statements
        if (greaterY === true) {
            if (lessX === true) {
                if (lessY === true) {
                    cvs.addEventListener("mousemove",mouseMoveHandler,false);
                }
            }
        }
    }

And finally, the mouseup function:

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

Here's a jsFiddle with the solution, but not using your image.