Simple counting and conditional statement with drag and drop

I'm getting frustrated with this and need some help. I have made a drag and drop interactive comp that is based off of the partially working tutorials form several people. Took me two days just to iron out the simple steps they do in Edge, yet don't work the same as mine. I could go on and on about how these tutorials wasted 2 days of my time, but I digress.

I have the comp working and doing everything it should. There is an animation with additional info that is set to play once all 5 draggable and droppable elements have reached their destination. Here is what the droppable code looks like:

(mouseover)

sym.$("Step3Draggable").draggable({

    opacity: 0.35, revert: "invalid"

});

sym.$("Step3Dest").droppable({

    accept: sym.$("Step3Draggable"),

    drop: function() {

        sym.getSymbol("Step3Draggable").play();

        sym.$("Step3Draggable").animate({"left": "50%", "top": "38.8%"});

        Dropped3 = "true";

    }

});

if(Dropped1 == "true" && Dropped2 == "true" && Dropped3 == "true" && Dropped4 == "true" && Dropped5 == "true"){

    sym.$("CompletedSymbol").show();

    sym.getSymbol("CompletedSymbol").play();

    Dropped1 = "false";

    Dropped2 = "false";

    Dropped3 = "false";

    Dropped4 = "false";

    Dropped5 = "false";

}

Then, a conditional if statement checks to see if Dropped3, etc have been set to true and if so, it plays that final animation. Problem is that it MUST have that mouseover trigger AGAIN, after the last element has been dropped. Not a big deal on desktops because the user is likely moving the mouse a hair at least, but on tablets, It's worthless.

Now if you know code, you know that this is not a very good way to do this, and quite cumbersome.

I started off wanting to do this...

On creationComplete

var Dropped = 0;

if(Dropped == 5){ sym.getSymbol("CompletedSymbol").play(); }

On the Symbol

(mouseover)

sym.$("Step3Draggable").draggable({

    opacity: 0.35, revert: "invalid"

});

sym.$("Step3Dest").droppable({

    accept: sym.$("Step3Draggable"),

    drop: function() {

        sym.getSymbol("Step3Draggable").play();

        sym.$("Step3Draggable").animate({"left": "50%", "top": "38.8%"});

        Dropped ++;

    }

});

This is the way I would prefer to do it, yet I get no results. Even more confusing yet, placing Dropped ++; as you see it right above causes the symbol to stay at .35 opacity!!!! What am I doing wrong??? Sure wish Animate would add some type of comp counting trigger.

Any help is appreciated.