2 Replies Latest reply on Dec 24, 2012 10:10 AM by Aiesyaah

    Revert statements in Adobe Edge

    Aiesyaah Level 1

      Hi,

       

      I have solved that part of the animation that allows only 1 draggable element in a droppable area at any one time. Am applying it to all the draggable elements now. However, I'm having some kind of problem right now. 

       

      I can drag the elements around. but now, i can only drop one element in the whole droppable areas. The rest of the elements will be revert back to it's original position without even dropping in first.

       

       

      I have also placed a reset button on the stage but I don't know why it won't appear eventhough I have tried changing it's position on the "Elements" column.

       

      This is my file so far, link: https://www.box.com/s/5a0dsq29upy2wtatxmyb

       

      This is an excerpt of my code which can work for the 1st draggable element.

       

      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");

                var animalArray = new Array();

       

       

      //DRAGGABLE. case1, _2

                var _2 = sym.$("_2");

                _2.css("position", "absolute");

                _2.draggable({ disabled: false });

                _2.draggable({ containment: stage });

                _2.draggable({

       

       

                snap: '.target1',

         snapMode: 'centre',

       

       

      //REVERT PART 1

         revert: "invalid",

         stop: function() {

         $(this).draggable('option', 'revert', 'invalid');

         }

                });

       

       

                animalArray.push(_2);

       

       

       

       

      //DROPPABLE

                var position1 = sym.$("position1");

                position1.css("position", "absolute");

                position1.droppable({

       

       

      //REVERT PART 2

         greedy: true,

       

       

                accept: ".allcases",

                drop: function(event, ui) {

       

                //console.log(ui['draggable'].eq(0).attr('id'));

       

       

                //REVERT PART 3

                if($('.filled').length<1){

       

       

                var draggedElement = ui['draggable'].eq(0).attr('id').replace("Stage_", "")

                //console.log(draggedElement)

       

       

       

       

                //for loop

                for(var i=0 ; i<animalArray.length;i++){

                var element = animalArray[i].attr('id').replace("Stage_", "")

                if(draggedElement == element){

       

       

                //change the animals width and height upon dropped over here

                animalArray[i].css('width','75px');

                animalArray[i].css('height','75px');

       

       

                //REVERT PART 4

                $(this).append('<div class="filled" ></div>')

                }

                }

                }else{

       

       

                ui.draggable.draggable('option', 'revert', true);

                }

       

       

                }

        });

       

      //---------------------------------------------------------------------------------------- ----------------

       

      //and these are the codes that don't work

      //DRAGGABLE. case2, _5, position2

                var _5 = sym.$("_5");

                _5.css("position", "absolute");

       

       

                _5.draggable({ disabled: false });

                _5.draggable({ containment: stage });

                _5.draggable({

       

       

                snap: '.target2',

         snapMode: 'centre',

       

       

         //REVERT PART 1

         revert: "invalid",

         stop: function() {

         $(this).draggable('option', 'revert', 'invalid');

         }

                });

       

       

                animalArray.push(_5);

       

       

      //DROPPABLE

                var position2 = sym.$("position2");

                position2.css("position", "absolute");

       

       

      //drop into position2

                position2.droppable({

       

       

      //REVERT PART 2

         greedy: true,

       

       

                accept: ".allcases",

                drop: function(event, ui) {

       

       

      //REVERT PART 3

      //edit the length?

                //orig: if($('.filled').length<1){

       

                //if($('.filled').length<6){ //other elements will still be stacked on top of it.

      //if($('.filled').length<10){ //other elements will still be stacked on top of it. but im able to drop e 1st element

      if($('.filled').length<50){

       

       

       

       

       

       

       

       

                var draggedElement = ui['draggable'].eq(0).attr('id').replace("Stage_", "")

       

       

                //for loop

                for(var i=0 ; i<animalArray.length;i++){

                var element = animalArray[i].attr('id').replace("Stage_", "")

                if(draggedElement == element){

       

       

                //change the animals width and height upon dropped over here

                animalArray[i].css('width','75px');

                animalArray[i].css('height','75px');

       

       

      //REVERT PART 4

                $(this).append('<div class="filled" ></div>')

                }

                }

                }else{

       

       

                ui.draggable.draggable('option', 'revert', true);

                }

       

       

                }

        });

      //end of codes--------------//

      //there's more elements of course, so you download the folder from the link above.

       

      I hope anyone can help me. Thank you so much