Hello,
I'm currently working on a drag and drop animation that has 7 draggable buttons. Each button is a symbol and inside each symbol I have triggers for the off, right and wrong states. What I want to accomplish at the moment is when you drop the last button the trigger goes off for the right state for all of the buttons. Right now it is only going off for one of the buttons. I've separated my draggable and droppable buttons into 2 different class types. Here is my code. Any help would be appreciated.
var dropCount = 0;
//draggable
sym.$(".dragBox").draggable({
opacity: 0.75,
snap:".dropBox", //Element that it will snap to
snapTolerance: 15, //Distance in pixels at which snapping should occur
snapMode: "inner", //Which edges of snap elements the draggable will snap to
stack: ".dragBox", //Brings the currently dragged item to the front
revert: "invalid", //Whether the element should revert to its start position when dragging stops
revertDuration: 250 //The duration of the revert animation, in milliseconds
});
sym.$(".dropBox").draggable({
disabled:true
});
//}
//droppable
sym.$(".dropBox").droppable({
accept: sym.$(".dragBox"), //Controls which draggable elements are accepted by the droppable
drop: function(event, ui){
if (dropCount == 6) {
sym.getSymbol(".dragBox").play("right");
}
dropCount +=1;
ui.draggable.draggable("disable"), //disables the draggable once it has been dropped
$(this).droppable("disable"), //disables the droppable once a draggable item has been placed on it
ui.draggable.position({ //snaps the draggable to the center of the droppable
of: $(this),
my: "center",
at: "center",
})
}