CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Tony
Tony

Reputation: 97

jQuery draggable applying multiple clicks after drag

I'm half way through updating my website and I've ran into an issue I can't seem to figure out. If you click the green button labeled "Alchemy Lab" an Alchemy Lab will pop up. After that if you drag the Lab once and click the red and green arrows in the Lab the counter works like it should with a max of 10. If you drag the Lab around 2 more times and then click the green or red arrow the count is off by 3. So every time you drop the Lab it adds another click on click. Any ideas on why or how to fix it? Thanks in advanced.

javascript:

    function handleNewClicks() {
    $(".pro_cell_3").click(function () {
        var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
        var maxUp = 10;

        if (currentUp == maxUp) {
            $(this).parent().find('.pro_cell_2').text("1");
        } else {
            $(this).parent().find('.pro_cell_2').text(currentUp + 1);
        }

    });
    $(".pro_cell_4").click(function () {
        var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
        var maxUp = 10;

        if ((currentUp - 1) == 0) {
            $(this).parent().find('.pro_cell_2').text(maxUp);
        } else {
            $(this).parent().find('.pro_cell_2').text(currentUp - 1);
        }
    });
    $(".up_cell_3").click(function () {
        var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
        var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
        var className = $(this).parent().parent().attr("class");
        className = className.replace("ui-draggable ", "");

        if (currentUp == maxUp) {
            $(this).parent().find('.up_cell_2').text("1");
            $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_1.png)' });
        } else {
            $(this).parent().find('.up_cell_2').text(currentUp + 1);
            $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp + 1) + '.png)' });
        }

    });
    $(".up_cell_4").click(function () {
        var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
        var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
        var className = $(this).parent().parent().attr("class");
        className = className.replace("ui-draggable ", "");

        if ((currentUp - 1) == 0) {
            $(this).parent().find('.up_cell_2').text(maxUp);
            $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + maxUp + '.png)' });
        } else {
            $(this).parent().find('.up_cell_2').text(currentUp - 1);
            $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp - 1) + '.png)' });
        }

    });
}

function proCoding() {    
    proWrap = document.createElement('div');
    $(proWrap).attr('class', 'pro_wrap');
    proCell1 = document.createElement('span');
    $(proCell1).attr('class', 'pro_cell_1');
    proCell2 = document.createElement('span');
    $(proCell2).attr('class', 'pro_cell_2');
    proCell3 = document.createElement('span');
    $(proCell3).attr('class', 'pro_cell_3');
    proCell4 = document.createElement('span');
    $(proCell4).attr('class', 'pro_cell_4');

    proCell2.innerText = "1";
    proWrap.appendChild(proCell1);
    proWrap.appendChild(proCell2);
    proWrap.appendChild(proCell3);
    proWrap.appendChild(proCell4);
}

function upCoding() {
    pos_top = $(window).scrollTop() + top_off_set;
    pos_left = $(window).scrollLeft() + left_off_set;

    upWrap = document.createElement('div');
    $(upWrap).attr('class', 'up_wrap');
    upCell1 = document.createElement('span');
    $(upCell1).attr('class', 'up_cell_1');
    upCell2 = document.createElement('span');
    $(upCell2).attr('class', 'up_cell_2');
    $(upCell2).attr('max', '10');
    upCell3 = document.createElement('span');
    $(upCell3).attr('class', 'up_cell_3');
    upCell4 = document.createElement('span');
    $(upCell4).attr('class', 'up_cell_4');

    upCell2.innerText = "1";
    upWrap.appendChild(upCell1);
    upWrap.appendChild(upCell2);
    upWrap.appendChild(upCell3);
    upWrap.appendChild(upCell4);

    newLab = document.createElement('div');
}

$(".nav_alchemy_lab").click(function () {
    proCoding();
    upCoding();
    newLab.appendChild(proWrap);
    newLab.appendChild(upWrap);

    $(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({
        containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move',
        start: function (e) {

        },
        stop: function (e) {
            setTimeout(function () {
                handleNewClicks()
            }, 1);
        }
    })

});

$(".ui-draggable").draggable({
    containment: '#content',
    stack: '#cardPile div',
    cursor: 'move'
});

$(".ui-droppable").droppable({
    accept: '#cardPile div',
    drop: handleCardDrop
});

function handleCardDrop(event, ui) {
    $(ui.draggable).css('top', $(this).position().top);
    var divWidth = ui.draggable.width();
    var divLeft = $(this).position().left;
    if (divWidth == 100) {
        divLeft -= 0;
    } else if (divWidth == 200) {
        divLeft -= 100;
    } else if (divWidth == 300) {
        divLeft -= 100;
    } else {
        divLeft -= 0;
    }
    $(ui.draggable).css('left', divLeft);
}

Upvotes: 2

Views: 468

Answers (1)

Andrew M
Andrew M

Reputation: 4288

Every time you finish dragging something, you run the function handleNewClicks().

$(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({
            containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move',
            start: function (e) {

            },
            stop: function (e) {
                setTimeout(function () {
                    handleNewClicks()
                }, 1);
            }
        })

In addition, this function binds events to the cells. When you bind the events to the cells multiple times, they are getting called more than once. You only need to run handleNewClicks() once when initializing the alchemy lab.

function handleNewClicks() {
        $(".pro_cell_3").click(function () {
            var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
            var maxUp = 10;

            if (currentUp == maxUp) {
                $(this).parent().find('.pro_cell_2').text("1");
            } else {
                $(this).parent().find('.pro_cell_2').text(currentUp + 1);
            }

        });
        $(".pro_cell_4").click(function () {
            var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
            var maxUp = 10;

            if ((currentUp - 1) == 0) {
                $(this).parent().find('.pro_cell_2').text(maxUp);
            } else {
                $(this).parent().find('.pro_cell_2').text(currentUp - 1);
            }
        });
        $(".up_cell_3").click(function () {
            var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
            var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
            var className = $(this).parent().parent().attr("class");
            className = className.replace("ui-draggable ", "");

            if (currentUp == maxUp) {
                $(this).parent().find('.up_cell_2').text("1");
                $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_1.png)' });
            } else {
                $(this).parent().find('.up_cell_2').text(currentUp + 1);
                $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp + 1) + '.png)' });
            }

        });
        $(".up_cell_4").click(function () {
            var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
            var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
            var className = $(this).parent().parent().attr("class");
            className = className.replace("ui-draggable ", "");

            if ((currentUp - 1) == 0) {
                $(this).parent().find('.up_cell_2').text(maxUp);
                $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + maxUp + '.png)' });
            } else {
                $(this).parent().find('.up_cell_2').text(currentUp - 1);
                $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp - 1) + '.png)' });
            }

        });
    }

Basically, to fix this, you could change the following function to what I have below:

$(".nav_alchemy_lab").click(function () {
        proCoding();
        upCoding();
        newLab.appendChild(proWrap);
        newLab.appendChild(upWrap);



    $(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({
                containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move'
            });

handleNewClicks()

    });

This is all untested.

Upvotes: 3

Related Questions