无法将变量的值从true更改为false

Question

Updating now, i found out that i need to disable the function change for a while, so i made the var enabled and make the functions available only if var enabled == true , in the end of the functions i'm passing enabled = false; , it should disable the function change(); , after the first time, but it still working perfectly. Could someone help me ?

//This function will give me the ID of the images, so i can make my conditions according to the ID
var enabled = true;

function pegaId(obj){
    var idCorreto = obj.getAttribute('id');
    return idCorreto;
}

if(enabled == true){
function drag(obj){
    var zIndexImg = 0;
    //with the var id, i detect which image is being dragged by the id
    var id = obj.getAttribute('id');

    var img = document.getElementById(id);
    var imgPositionLeft = img.offsetLeft;
    var imgPositionTop = img.offsetTop;

        img.ondragstart = function(){
            return false;
        };

        function dropImage(e){
            img.style.transition = "";
            img.style.zIndex = zIndexImg++;

            //make the drag of the imgs
            img.style.top = e.clientY - imgPositionTop +'px';
            img.style.left = e.clientX - imgPositionLeft + 'px';

            console.log(e.clientX - imgPositionLeft);
        }

function change(id1,id2,div1,div2){
//this function will make the change of the imgs                
    img.removeAttribute('style');

    //i put the imgs and the divs they are kept in these vars
    var imgDiv = document.getElementById(div1);
    var imgDiv_2 = document.getElementById(div2);
    var imgId = document.getElementById(id1);
    var imgId2 = document.getElementById(id2);

    //take the id of both imgs
    var getId = imgId.getAttribute('id');
    var getId2 = imgId2.getAttribute('id');

    //and change the id's
    imgId.setAttribute('id',getId2);
    imgId2.setAttribute('id',getId);

//and overwrite the imgs in the divs, making the change
imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
            }

function drop(e){
//this function is for the drop of the img
    dropImage(e);
    //remove the added events
document.removeEventListener('mousemove' ,dropImage);
            document.removeEventListener('mouseup', drop);

//find out which image is clicked so i can make the right change
if(img.style.left >= '90px' && img.style.left <= '130px'){
    //take the ID so i know which image are being dragged
    if(pegaId(obj) == 'teste1'){

        //and make the change
        change("teste1","teste2","img1","img2");

    }else if(pegaId(obj) == 'teste2'){
        change("teste2","teste3","img2","img3");                
    }

}

if(img.style.left >= '230px' && img.style.left <= '250px'){
                change("teste1","teste3","img1","img3");

}
if(img.style.left >= '-115px' && img.style.left <= '-130px'){

    if(pegaId(obj) == 'teste3'){
        change("teste2","teste3","img2","img3");                            
    }
    else if(pegaId(obj) == 'teste2'){
        change("teste2","teste1","img2","img1");                
    }
            }

if(img.style.left >= '-225px' && img.style.left <= '-250px'){
        change("teste1","teste3","img1","img3");            
    }

//reset the values after the change
img.style.left = '0px';
img.style.top = '0px';
}

//add the events again when the img is clicked
img.addEventListener('mousedown', function(){
            document.addEventListener('mousemove', dropImage);
            document.addEventListener('mouseup', drop);
        });
}
    enabled = false;
}

http://jsfiddle.net/m8vvhf8e/3/

Answer 1

I find out my problem was that i was changing the ID in the same function i was changing the images, and that was bringing some trouble to the function. I was able to fix the problem just by making the changing of the images in one function and the change of the ID in another function:

//function to change the imgs places
            function change(id1,id2,div1,div2){

                img.removeAttribute('style');

                var imgDiv = document.getElementById(div1);
                var imgDiv_2 = document.getElementById(div2);
                var imgId = document.getElementById(id1);
                var imgId2 = document.getElementById(id2);

                imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
                imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
}

//function to change the imgs id's
            function trocaId(id1,id2){
                var id_1 = document.getElementById(id1);
                var id_2 = document.getElementById(id2);

                    id_1.setAttribute('id',id2);
                    id_2.setAttribute('id',id1);
                }

//making the changes

            if(img.style.left >= '250px' && img.style.left <= '290px'){
                if(pegaId(obj) == 'teste1'){
                    change("teste1","teste2","img1","img2");
                    trocaId("teste1","teste2");
                }else if(pegaId(obj) == 'teste2'){
                    change("teste2","teste3","img2","img3");
                    trocaId("teste2","teste3");
                }

http://jsfiddle.net/v1u1xnwj/10/