0 Replies Latest reply on Feb 13, 2013 11:01 AM by Anastasiya_82

    Event triggered by multiple events

    Anastasiya_82

      Hello!

       

      I am working on interactive code in Adobe Edge. I created several function triggered by specific events. Now I need to write the final function. The symbol should play when several draggable elements are inserted into several drop boxes at the same time. Please, give me an example of how to write this function.

       

      Here is the code:

       

       

      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

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

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

                Rectangle1.css("left", 50);

                Rectangle1.css("top", 35);

                Rectangle1.draggable({ disabled: false });

                Rectangle1.draggable({ containment: stage });

                Rectangle1.draggable({

         snap: '.target1',

         snapMode: 'corner'

                });

                // drop in box

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

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

                dropCase1.css("left", 375);

                dropCase1.css("top", 25);

                dropCase1.on( "dropout", function( event, ui ) {

                          Rectangle1.css("background-color", "grey");

                } );

       

       

                dropCase1.droppable({

                          accept: ".case1",

                          drop: function(event, ui) {

                                    // change the color of the draggable item

                                    Rectangle1.css("background-color", "blue");

                                    //play the symbol box timeline

                                    var box = sym.getSymbol("box");

                                    box.play();

                          }

                // adds visual when correct drops here

       

       

       

       

                });

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

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

                Rectangle2.css("left", 50);

                Rectangle2.css("top", 150);

                Rectangle2.draggable({ disabled: false });

                Rectangle2.draggable({ containment: stage });

                Rectangle2.draggable({

         snap: '.target2',

         snapMode: 'corner'

                });

                          // drop in box

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

                dropCase2.css("left", 375);

                dropCase2.css("top", 150);

                dropCase2.droppable({

                          // accept only case 2

                          accept: ".case2",

                          drop: function() {

                                    var box = sym.getSymbol("box");

                                    box.play();

                          }

       

       

                });

       

       

      }

       

       

       

      Thank you very much!

                                                                                 Anastasiya