Question

I’m building a simple puzzle app for and iPad using a JavaScript library for dragging and dropping the pieces. I can’t figure out how to check if all the pieces are in the right place however.

What I’ve got so far is

// create the draggable puzzle piece
var p1=document.getElementById('piece1');
new webkit_draggable(p1);
p1.className = 'ps1';

// create an array to count the pieces placed correctly
var countArray = new Array();

// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
var p1p1 = webkit_drop.add('droppiece1',{accept : ['ps1'], onDrop : function(){countArray.push("a");webkit_drop.remove('droppiece1')}});


// piece has been placed correctly.
if(countArray.length = 1){
alert('Piece placed correctly');
};

The problem I’m having is that the alert from the counting function fires immediately.
How can I fix this?

Answer 1

Change your last three lines to:

// piece has been placed correctly.
if(countArray.length == 1){
alert('Piece placed correctly');
};

You were trying to assign, instead of checking for equality.

Edit: So, it’s still not working for you? It seems to me you are setting up a listener on onDrop but then directly after you have done that (presumably before the onDrop event ever gets triggered) you are checking if anything has been “dropped”. See how that won’t work?
If you just want to see that the event is actually getting triggered, and that the “a” is in fact pushed onto your array you could move the last three lines inside your callback. Like so:

// create the draggable puzzle piece
var p1 = document.getElementById('piece1');
new webkit_draggable(p1);
p1.className = 'ps1';

// create an array to count the pieces placed correctly
var countArray = new Array();

// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
var p1p1 = webkit_drop.add('droppiece1', {accept: ['ps1'], onDrop: function() {
    countArray.push("a");
    webkit_drop.remove('droppiece1');

    // piece has been placed correctly.
    if (countArray.length == 1) {
        alert('Piece placed correctly');
    }
}});

I haven’t really tested that, but here is a version with all the webkit stuff taken out and the drop replaced with a simple click: http://jsfiddle.net/kajic/snJMr/1/

If you click the red box, is that what you expected to happen on your ipad app when you drop the piece?