2 Replies Latest reply on Dec 14, 2012 1:49 AM by try67

    Drag and drop for PC and Tablet issues

    Aiesyaah

      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.