1

ユーザーが「錠剤」を「カップ」にドラッグすると、カップ内の錠剤の量を表示できるJqueryプロジェクトに取り組んでいますが、ユーザーが移動した場合に錠剤がカップに入ると問題が発生しますピルは再び落とされたと見なされます。ドロップ可能（カップ）にドロップされたときにドラッグ可能（ピル）を1回カウントするにはどうすればよいですか。配列を格納するか、各ピルに識別子を添付する 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;
        }

    });
});

誰かが助けてくれることを願っています

みんなありがとう

4

1 に答える 1

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;
}
于 2012-08-28T13:14:38.573 に答える