Question

I have had a look about the site and found some code and tried it out but its not working in any shape or form.

I am wanting to count the number of DIVs that’s placed into another DIV by the user dragging and dropping but only to count the ‘correct’ ones then if all the correct ones are in the DIV display an alert saying well done then rest the ‘game’. Also need to show how many more is needed to go to ‘win’.

This is what I have so far:

JS:

    $('.drop').each(function(){ 
        var n = $(this).children('.draggable').length;
        $(".count").text("There are " + n + " divs inside parent box detail.");
        if(n == 2){
        alert("You got them all right! :)");
        }
        });

HTML:

    <div class="foods">
              <div class="draggable" id="draggable"><img src="images/fish.png" id="draggable"></div>

              <div class="draggable" id="draggable"><img src="images/stone.png"></div>

              <div class="wrong"><img src="images/tree.png"></div>
            </div>

<div class="foods">                
<div id="droppable" class="drop">
<p>Drop here</p>
</div>
</div>

<div class="foods">
        <span class="count"></span> 
</div>

JS Fiddle of the code: http://jsfiddle.net/JRLZK/

Answer 1

This should do it with your logic.

 $(function() {
    var n = 0;
    $( ".draggable" ).draggable();
    $( ".wrong" ).draggable();

    $( "#droppable" ).droppable({    
        drop: function( event, ui) {
            console.log($(ui));
            if($(ui.draggable).hasClass("draggable")){
            $( this )
                .find( "p" )
                 .html( "Correct! :)" );
                n++;
        $(".count").text("There are " + n + " divs inside parent box detail.");
        if(n == 2){
        alert("You got them all right! :)");
        }

            } else {
                    $( this )
                    .find( "p" )
                    .html( "Wrong! :(" );
            }
        }
    });
});