if/else &/or switch statement

[aisyah24]

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.

[Author]

Posts