JQuery拖放数下降区的内容？ [英] JQuery Drag and Drop Count Content of Drop Area?

问题描述

我在Jquery项目中工作，用户可以将药丸拖入杯，然后可以显示杯中的药丸数量，但是如果药丸在杯中，则会出现问题用户将其计数的药物移动到再次丢弃。如果将其放在可滴入（杯）中，那么可以如何计数一次（药丸）。是否存储数组的/ if循环或附加标识符到每个药丸的情况？

Im working on a Jquery project in which the user can drag a 'pill' into a 'cup' and then the amount of pills in the cup can be displayed however ive got a problem with once the pill is in the cup if the user moves the pill it counts it as being dropped again. How do i get the draggable(pill) to be counted once when dropped in the droppable(cup). Is it a case of a for/if loop of storing an array or attaching an identifier to each pill?

这里是我的一些代码
html

here is some of my code html

       <div id="PillSpace">
       <div class="PillCup"><p>accept: '#Pill'</p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div><br>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div><br>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       </div>

JQuery是：

      $(document).ready(function() {
    var count = 0;
    $( ".Pill").draggable();

    $( ".PillCup" ).droppable({
        accept: ".Pill",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        over:function(){
            $( ".PillCup" ).find("p").html(count).text;
        },
        out:function(){
        count--;
            $( ".PillCup" ).find("p").html(count).text;
        },
        drop: function( event, ui ) {
            count++;
            $( ".PillCup" ).find("p").html(count).text;
        }

    });
});

希望有人可以帮助

谢谢你们

推荐答案

而不是每次下降的inc /减量计数，尝试计算容器中药丸的总数：

Rather than inc/decrement the count for each drop, try counting the total number of pills in the container:

out: function(){
    count = $(".Pill", ".PillCup").count();
    $( ".PillCup" ).find("p").html(count).text;
},
drop: function( event, ui ) {
    count = $(".Pill", ".PillCup").count();
    $( ".PillCup" ).find("p").html(count).text;
}

这篇关于JQuery拖放数下降区的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！