Jquery 多个可拖放项目

Question

我有一个 jquery 可投放的购物车，它是我通过 Sarath Sprakash 根据此代码自定义的。它允许捐赠者从一些预先定义的捐赠金额中 select 并将它们拖到他们希望支持的类别中，并将它们添加到一个总数中。

一切正常，除非您将可拖动对象从可放置对象中拖出。如果您在不同的掉落物中有两笔或更多笔 10 英镑的捐款，并且移除了一个，它也会移除另一个，尽管总数相加是正确的。

我怀疑这与克隆有关，但无法追踪到问题所在。有人可以帮忙吗？

HTML:

<div id="dragAndDrop"><a id="dragtop"></a>&nbsp;
<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">&pound;10</div>
<div class="ui-widget-content" data-value="15" data-count="0">&pound;15</div>
<div class="ui-widget-content" data-value="25" data-count="0">&pound;25</div>
<div class="ui-widget-content" data-value="50" data-count="0">&pound;50</div>
<div class="ui-widget-content" data-value="100" data-count="0">&pound;100</div>
</div>
<div id="categories">&nbsp;</div>
<div id="descriptionWrap">
<div class="description">
<div id="first" class="droppable" data-count="0">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 : &pound;</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');
});

Answer 1

删除所有相同数量的原因是它的 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');
});

Jquery 多个可拖放项目

Jquery Multiple Draggable and Droppable Items

jquery

jquery-ui

droppable

draggable

cart