Hi! I’m doing a drag and drop for both PC and tablet. I’m doing the animation in Adobe Edge.

I have some problems when I drag and element over to the droppable area. I need to allow any elements (draggables) to be able to drop into any of the droppable areas and not just restrict to 1 area. I tried using the if/else statement, but I can’t seem to make it work. For example, Position 1 (droppable area) must be able to accept all the cases – case1, case2, case3 (draggables), but only 1 draggable on a droppable at any one time.

I hope you can help me out, or atleast helping me with the if/else statement. This is a link to my folder. https://www.box.com/s/0pksqtpmqg7zae43en66

—--------—these are my codes, in case you can’t open the file———————–

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. case1 //
var _1 = sym.$(“_1″); 
var _2 = sym.$(“_2″); 
_2.css(“position”, “absolute”);
 _2.draggable({ disabled: false }); 
_2.draggable({ containment: stage }); 
//for(var i=1; i<=9;i++){ _2.draggable({ snap: '.target1', snapMode: 'centre' });

//DROPPABLE 
var position1 = sym.$("position1"); 
position1.css("position", "absolute"); 
// position1.css("left", 375); 
// position1.css("top", 25); 
//position1.on( "dropout", function( event, ui ) { 
//}); 
//drop into position1 position1.droppable({ accept: ".case1", drop: function(event, ui)
 { console.log(this.childNodes); 
var element2 = sym.$(".Stage_position1__1Black_Eagle_id"); //Stage_position1__1Black_Eagle_id element2.show(); _2.hide(); 

/*else if(_1){ var element = sym.$(".Stage_position1__2Green_Parrot_id"); element.show(); _1.hide(); } */ } 
// adds visual when correct drops here }); //————————————————————–

//DRAGGABLE case2, _5 
var _5 = sym.$("_5"); 
_5.css("position", "absolute");
 _5.draggable({ disabled: false });
 _5.draggable({ containment: stage }); 
//for(var i=1; i<=9;i++){
 _5.draggable({ snap: '.target2', snapMode: 'corner' });

//DROPPABLE 
var position2 = sym.$("position2"); 
position2.css("position", "absolute"); 
position2.droppable({ accept: ".case2", drop: function(event, ui) { console.log(this.childNodes); 
var element5 = sym.$(".Stage_position2__5Black_Snake_id"); 
element5.show(); _5.hide(); } }); 
//————————————————————–

//case3. _7 //DRAGGABLE 
var _7 = sym.$("_7"); 
_7.css("position", "absolute"); 
_7.draggable({ disabled: false }); 
_7.draggable({ containment: stage }); 
_7.draggable({ snap: '.target3', snapMode: 'corner' });

//DROPPABLE 
  var position3 = sym.$("position3"); 
  position3.css("position", "absolute"); 
  position3.droppable({ accept: ".case3", drop: function(event, ui) {     console.log(this.childNodes); 
    var element7 =  sym.$(".Stage_position3__7Green_Praying_Mantis_id"); 
element7.show(); 
_7.hide(); } });
// end of codes } /————————————————————————————————————— I've only included excerpt of the codes to let you have an idea of it. Thank you so much for your time.