2
Я на полпути через обновление my website, и я столкнулся с проблемой, которую я не могу понять. Если вы нажмете зеленую кнопку «Alchemy Lab», появится «Алхимическая лаборатория». После этого, если вы перетащите лабораторию один раз и щелкните по красным и зеленым стрелкам в Lab, счетчик работает так, как должен, максимум 10. Если вы перетащите лабораторию еще 2 раза, а затем нажмите зеленую или красную стрелку, счет будет равен 3. Каждый раз, когда вы бросаете Лабораторию, он добавляет еще один клик по щелчку. Любые идеи о том, почему и как их исправить? Заранее спасибо.jQuery draggable применение нескольких кликов после перетаскивания
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);
}
Надеюсь, вы не ожидаете, что люди просмотрят источник вашего сайта. Пожалуйста, разместите соответствующий код. –
Я рекомендую вам попробовать опубликовать то, что, по вашему мнению, соответствующий код, создающий ошибку, и желательно, что вы пытались сделать для ее решения. Это не сайт, на котором вы получаете бесплатную работу, а о сотрудничестве. – Trufa
Я добавил соответствующий javascript, но половина html создается на основе того, что вы нажимаете, а другая половина - массивная сетка 7x8, так что да, вам понадобится плагин, похожий на figbug. Я не пытаюсь заставить кого-либо взглянуть на мой сайт ... на веб-сайте есть определенная аудитория, и я очень сомневаюсь, что кто-то здесь вообще интересуется, я просто хочу исправить свой код. – Tony