Hello!

I am working on interactive JavaScript code in Adobe Edge. I created several function triggered by specific events. Now I need to write the final function. The symbol should play when both draggable elements are inserted into two drop boxes at the same time. Please, help me to write this function!

Here is the code:


yepnope(
{
nope:[
'js/jquery-ui-1.9.2.custom.min.js',
'js/jquery.ui.touch-punch.min.js',
'css/jquery-ui-1.9.2.custom.min.css'
],
complete: init
}
);






function init() {
var stage = sym.$("Stage");
// draggable
var Rectangle1 = sym.$("Rectangle1");
Rectangle1.css("position", "absolute");
Rectangle1.css("left", 50);
Rectangle1.css("top", 35);
Rectangle1.draggable({ disabled: false });
Rectangle1.draggable({ containment: stage });
Rectangle1.draggable({
snap: '.target1',
snapMode: 'corner'
});
// drop in box
var dropCase1 = sym.$("dropCase1");
dropCase1.css("position", "absolute");
dropCase1.css("left", 375);
dropCase1.css("top", 25);
dropCase1.on( "dropout", function( event, ui ) {
Rectangle1.css("background-color", "grey");
} );


dropCase1.droppable({
accept: ".case1",
drop: function(event, ui) {
// change the color of the draggable item
Rectangle1.css("background-color", "blue");
//play the symbol box timeline
var box = sym.getSymbol("box");
box.play();
}
// adds visual when correct drops here




});
var Rectangle2 = sym.$("Rectangle2");
Rectangle2.css("position", "absolute");
Rectangle2.css("left", 50);
Rectangle2.css("top", 150);
Rectangle2.draggable({ disabled: false });
Rectangle2.draggable({ containment: stage });
Rectangle2.draggable({
snap: '.target2',
snapMode: 'corner'
});
// drop in box
var dropCase2 = sym.$("dropCase2");
dropCase2.css("left", 375);
dropCase2.css("top", 150);
dropCase2.droppable({
// accept only case 2
accept: ".case2",
drop: function() {
var box = sym.getSymbol("box");
box.play();
}


});


}



Thank you very much!
Anastasiya