I'm working on a project in which I have four draggables, four droppable, and four default droppables in the composition. Once these four individual draggables have been dropped onto their perspective recipients I want to trigger a symbol to play it's timeline based on a conditional statement that verifies all four draggables have been dropped properly.
To do this, I pushed the four draggable groups into an array after they have been dropped and draggable destroyed using the jquery ui library. I know the array is being populated because I get the appropriate groups back in the console and the appropriate array length.
I have attempted then to do a for loop to scan the array and the feed that through an if statement to verify that it has four items and then trigger the playing of the symbol timeline. Only problem is it is not working. Do you have any advice on how to solve the issue based on the code below?
correct=[];
//DRAGGABLE RIDE TO AIRPORT GROUP
sym.$('rideGroup').draggable({ containment:'parent', scope: 'task3', opacity:.9, revert:'invalid', zIndex:6 });
//Make the targetRide area droppable and accept the Ride to Airport Group
sym.$('targetRide').droppable({
scope:'task3',
drop: function(event, ui){
accept: 'rideGroup'
tolerance:'fit'
draggable:'destroy'
correct.push('rideGroup');
}
});
sym.$('defaultRide').droppable({
scope: 'task3', drop: function(event,ui){
accept: 'rideGroup'
}
});
for(var i=0; i <= correct.length; i++){
if(i === 4 && correct.length === 4){
sym.getSymbol('Animation').play('greatJob');
}else{ sym.getSymbol('Animation').play('notRight');
}
};
If I take the sym.getSymbol line of code in the conditional statement and place it where the push statement is, each of the draggables will play the timeline after being dropped. We don't want that though. We need the timeline to play only after all four of the draggables have been dropped. I only included the code for one of the draggable and droppable sets here for space reasons.
Thank you for any assistance you can provide.