我有一个jquery droppable购物车,我通过Sarath Sprakash从这段代码中自定义。它允许捐赠者从一些预先定义的捐赠金额中进行选择,并将它们拖到他们希望支持的类别上,并将它们加到一起。
一切都运行正常,除非你从拖放中拖出一个可拖动的东西。如果您在不同的droppables中有两个或更多10英镑的捐款并删除一个,它也会删除另一个,尽管总数正确相加。
我怀疑它与克隆有关,但无法追踪问题。有人可以帮忙吗?
小提琴http://jsfiddle.net/mrdh592z/
HTML:
<div id="dragAndDrop"><a id="dragtop"></a>
<div id="amounts">
<h2>Please place stickers for the amount you want to give in any or all of these circles to help people move out of homelessness.</h2>
<div class="ui-widget-content" data-value="10" data-count="0">£10</div>
<div class="ui-widget-content" data-value="15" data-count="0">£15</div>
<div class="ui-widget-content" data-value="25" data-count="0">£25</div>
<div class="ui-widget-content" data-value="50" data-count="0">£50</div>
<div class="ui-widget-content" data-value="100" data-count="0">£100</div>
</div>
<div id="categories"> </div>
<div id="descriptionWrap">
<div class="description">
<div id="first" class="droppable" data-count="0"> </div>
<h3>First Meeting</h3>
<p>Help us be there for more homeless people with a friendly smile, a warming cup of tea and precious time to talk.</p>
</div>
<div class="description">
<div class="droppable" data-count="0"> </div>
<h3>Goal Setting</h3>
<p>Give the support many homeless people need to identify positive goals and work towards them, one step at a time.</p>
</div>
<div class="description">
<div class="droppable" data-count="0"> </div>
<h3>IT Skills</h3>
<p>Help us provide more classes so that people can learn IT skills to help them build their confidence and find a job.</p>
</div>
<div class="description">
<div class="droppable" data-count="0"> </div>
<h3>CV Skills</h3>
<p>Help give more homeless people the training, support and encouragement they need to create good CVs and find employment.</p>
</div>
<div class="description">
<div class="droppable" data-count="0"> </div>
<h3>A home of their own</h3>
<p>Provide advice, support and household items to people who are setting up home again after months or years of being homeless.</p>
</div>
</div>
<div id="totalWrap">
<div id="totalText">Total : £</div>
<div id="counter">0</div>
<div id="reset"><input id="zero" type="button" value="Reset" /></div>
</div>
</div>
Jquery的
var a = 0;
var i = 0;
var q = 0;
var drg;
var z = parseInt($('.droppable').attr('data-count'));
$(function () {
var cln;
$(".ui-widget-content").draggable({
drag: function (event, ui) {
drg = $(this);
$(".droppable").droppable('enable');
},
helper: 'clone'
});
$(".droppable").droppable({
tolerance: "fit",
drop: function () {
var q = parseInt($('.droppable').children('.runningTotal').html());
a = a + parseInt(drg.attr('data-value'));
$("#counter").html(a);
i++;
z++;
q=q+parseInt($(drg).attr('data-value'));
var txt = drg.text() + "1";
$(this).append("<div class='mini' id=" + drg.text() + " data-value=" + drg.attr('data-value') + ">" + drg.text() + "</div>");
q==0;
$("#" + drg.text()).draggable({
drag: function (event, ui) {
drg = $(this);
},
stop: function (event, ui) {
var tt = drg.text() + "1";
i--;
if (parseInt($("#" + tt).text()) > 1) {
$("#" + tt).html(parseInt($("#" + tt).text()) - 1);
} else {
$("#" + drg.text()).remove();
$(this).remove();
}
a = a - parseInt(drg.attr('data-value'));
$("#counter").html(a);
},
helper: 'clone'
});
}
});
});
$('#zero').click(function() {
$('#PC14234_txtAmount').val(0);
$('.mini').remove();
$('#counter').html('0');
});
答案 0 :(得分:0)
删除所有相同金额的原因是其ID。它同样适用于所有相同数量的.remove(),从droppable中删除所有克隆。因此,要摆脱这个问题,你必须使id唯一。用以下JS代码替换您的JS代码:
var a = 0;
var i = 0;
var q = 0;
var drg;
var z = parseInt($('.droppable').attr('data-count'));
var cnt=0;//counter variable for unique id
$(function () {
var cln;
$(".ui-widget-content").draggable({
drag: function (event, ui) {
drg = $(this);
$(".droppable").droppable('enable');
},
helper: 'clone'
});
$(".droppable").droppable({
tolerance: "fit",
drop: function () {
var q = parseInt($('.droppable').children('.runningTotal').html());
a = a + parseInt(drg.attr('data-value'));
$("#counter").html(a);
i++;
z++;
q=q+parseInt($(drg).attr('data-value'));
var txt = drg.text() + "1";
cnt=cnt+1;
var id=cnt+parseInt($(drg).attr('data-value'));//creating unique id by adding cnt value to it.
$(this).append("<div class='mini' id=" +id + " data-value=" + drg.attr('data-value') + ">" + drg.text() + "</div>");
q==0;
$("#" + id).draggable({
drag: function (event, ui) {
drg = $(this);
},
stop: function (event, ui) {
var tt = id + "1";
i--;
if (parseInt($("#" + tt).text()) > 1) {
$("#" + tt).html(parseInt($("#" + tt).text()) - 1);
} else {
$("#" + id).remove();
$(this).remove();
}
a = a - parseInt(drg.attr('data-value'));
$("#counter").html(a);
},
helper: 'clone'
});
}
});
});
$('#zero').click(function() {
$('#PC14234_txtAmount').val(0);
$('.mini').remove();
$('#counter').html('0');
});