拖放后应用多次点击的jQuery draggable

Question

我正在更新my website的一半，我遇到了一个我似乎无法弄清楚的问题。如果单击标有“Alchemy Lab”的绿色按钮，将弹出Alchemy Lab。之后，如果您拖动实验室并单击实验室中的红色和绿色箭头，则计数器的工作方式应为最多10个。如果将实验室拖动2次以上，然后单击绿色或红色箭头，则计数为因此，每当您放弃实验室时，它会再次点击一下。关于为什么或如何修复它的任何想法？谢谢你提前。

的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);
}

Answer 1

每次完成拖动操作后，都会运行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);
            }
        })

此外，此功能将事件绑定到单元格。将事件多次绑定到单元格时，它们会被多次调用。初始化炼金术实验室时，您只需要运行一次handleNewClicks()。

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)' });
            }

        });
    }

基本上，要解决此问题，您可以将以下功能更改为以下内容：

$(".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()

    });

这都是未经测试的。