丢弃区域的JQuery拖放计数内容？

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

这是我的一些代码html

 
accept: '#Pill'
 
 
 

 
 
 

 
 
 
  

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; }