CODEWITHSUNDEEP
javascriptjquerydrag-and-drop
tuyenle
tuyenle

Reputation: 79

change variable value after click jquery

I want to be able to click on a canvas, move it to the map, drop it on the map. After dropping it on the map, they can select the canvas on the map and move it again. The process is repeated. I have trouble with the ignoreMouseMove variable, it does not reset to false and is always true.

Here is link to the demo: https://pokemon-map-electro2k.c9users.io/index.html

var moveCanvas = function ($canvas, e) {
    $(".map ul li." + $canvas).offset({
        left: e.pageX - 30,
        top: e.pageY - 30
    });
};

// When user first click on canvas
var onmousemove = function ($canvas) {

    var ignoreMouseMove = false;

    // Make canvas follow cursor in the map area
    $(".map").mousemove(function (e) {
        if (ignoreMouseMove) return;    // event handling mousemove is "disabled"
        moveCanvas($canvas, e);
    }).click(function () {

        // "re-enable" mousemove
        ignoreMouseMove = true;

        // When canvas is click on again within the map area, make canvas follow cursor
        $(".map ul li").click(function () {
            $(".map").mousemove(function (e) {
                if (!ignoreMouseMove) return;
                moveCanvas($canvas, e);
            }).click(function () {
                // Click function does not work anymore. ignoreMouseMove can't be reset. It is always true
                ignoreMouseMove = false; 
            })
        });

    });

};

Upvotes: 0

Views: 65

Answers (1)

Karpak
Karpak

Reputation: 1937

You may need to change the below line 

// "re-enable" mousemove
ignoreMouseMove = true;

in to 

// "re-enable" mousemove
ignoreMouseMove = !ignoreMouseMove;

Upvotes: 1

Related Questions