Question

for a school project i’m making a jigsaw puzzle out of javascript and jquery. I have created 4 draggable div’s that should be dropped at a point, and if all div’s have been dropped at the right place, it should give a message that the puzzle is finished. everything is finished, except the part of the message. My IT teacher told me that I have to use a counter (i++) but I can’t get this part working. Could you help?

If you have the answer, can you explain it a bit as well? I don’t have much experience with jquery/javascript.

thanks in advance, Friso (Netherlands)

the code of the important stuff(link to the page: friso.webatu.com/Site/droppable_jquery_met_javascript.htm)

<script>
var i = 0;
$(function() {

    $( ".draggable_l_t" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });
    $( ".draggable_r_t" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });
    $( ".draggable_l_b" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });
    $( ".draggable_r_b" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });

    $( ".droppable_l_t" ).droppable({
        accept: ".draggable_l_t",
        drop: function( event, ui ) {

                    i++;
        }
    });

    $( ".droppable_r_t" ).droppable({
        accept: ".draggable_r_t",
        drop: function( event, ui ) {

                    i++;
        }
    });

    $( ".droppable_l_b" ).droppable({
        accept: ".draggable_l_b",
        drop: function( event, ui ) {

                    i++;
        }
    });
    $( ".droppable_r_b" ).droppable({
        accept: ".draggable_r_b",
        drop: function( event, ui ) {

                    i++;
        }
    });

});
while (i==3)
{alert('goedzo!');}
</script>

Answer 1

You need to check the value of i after you increment it. The while bit is useless right now. Try

<script>
$(function() {
    var i = 0;

    function dropCallback() {
        i++;
        if(i===4) {
            alert('goedzo!');
        }
    }

    $( ".draggable_l_t" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });
    $( ".draggable_r_t" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });
    $( ".draggable_l_b" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });
    $( ".draggable_r_b" ).draggable({ snap: ".droppable_l_t, .droppable_r_t, .droppable_l_b, .droppable_r_b", snapMode: "inner" });

    $( ".droppable_l_t" ).droppable({
        accept: ".draggable_l_t",
        drop: dropCallback
    });

    $( ".droppable_r_t" ).droppable({
        accept: ".draggable_r_t",
        drop: dropCallback
    });

    $( ".droppable_l_b" ).droppable({
        accept: ".draggable_l_b",
        drop: dropCallback
    });
    $( ".droppable_r_b" ).droppable({
        accept: ".draggable_r_b",
        drop: dropCallback
    });

});
</script>