Drag and drop for PC and Tablet issues

Question

Hi!
I’m doing a drag and drop for both PC and tablet.
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 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″); changed _1 to _2
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
//case2. _5
//DRAGGABLE
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
Can anyone help me to figure out the if/else or switch statement to be used? I tried both but it doesn' work. This is my switch statement.
var stage = sym.$(new bigElements) ;
switch (bigElements) {
//list down all the possible cases/scenarios.
  case "Stage__2":
          alert("Just like the sky!");
    break;
  case "Stage__5":
              alert("Just like shiraz!");
    break;
  case "Stage__7":
    alert("Suit yourself then...");
    break;
  default:
    alert("lalala...");
var stage = sym.$(new bigElements)
switch (bigElements) {
  case "Stage__2":
    alert("Just like the sky!");
    break;
  case "Stage__5": //"case2"
   alert("Just like shiraz!");
    break;
  case "Stage__7":
   alert("Suit yourself then...");
    break;
  default:
     alert("lalala...");
I've only included excerpt of the codes to let you have an idea of it. Thank you so much for your time.

Answer 1

It seems like you're asking about JS for web-pages. This forum is about JS
in PDF documents.