Question

我正在开发一个Jquery项目，用户可以在其中将“药丸”拖入“杯子”，然后可以显示杯子中的药丸数量，但是如果丸子放入杯子中就会出现问题用户移动药丸，将其视为再次掉落。如何将可拖动（药丸）放入可放置（杯子）中时计数一次。这是一个存储阵列或将标识符附加到每个药丸的for / if循环的情况吗？

这是我的一些代码 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;
        }

    });
});

希望有人可以提供帮助

谢谢你们

Answer 1

尝试计算容器中的药丸总数，而不是增加/减少每次丢弃的计数：

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拖放计数内容？

1 个答案: