9 Replies Latest reply on Oct 21, 2013 2:09 AM by ferran_morales

    Drop scope problem

    gdc88

      Hi there,

       

      I'm making a quiz and am stuck with some drag and drop stuff.

      I need to play a symbol when everything is dropped in the right place.

       

      It need to get playing when everything is dropped on the multiple droppable area's, and not just one item.

       

      This is my code.

       

      yepnope({nope:['jquery-ui-1.10.3.custom.min.js'], complete: init});

       

      function init(){

       

          sym.$('persfoto2').draggable({opacity:.5, revert:'invalid', scope:'publi'});

          sym.$('drukwerk').draggable({opacity:.5, revert:'invalid', scope:'publi'});

          sym.$('advertentie2').draggable({opacity:.5, revert:'invalid', scope:'publi'});

       

          sym.$('publiciteit_drop').droppable({

          scope:'publi',

          drop: function () {

          sym.getComposition().getStage().$('proberen').show(); }});

       

          sym.$('handjes').draggable({opacity:.5, revert:'invalid', scope:'office'});

          sym.$('scholen').draggable({opacity:.5, revert:'invalid', scope:'office'});

          sym.$('telefoon2').draggable({opacity:.5, revert:'invalid', scope:'office'});

          sym.$('planning').draggable({opacity:.5, revert:'invalid', scope:'office'});

       

          sym.$('office_drop').droppable(

          {scope:'office',

          drop: function() {

          sym.getComposition().getStage().$('proberen').show(); }});

       

       

      }

       

      I hope someone can help me out.

      Thank you!

        • 1. Re: Drop scope problem
          Zaxist Level 4

          can you upload your project so i can help you better ?

           

          Zaxist

          1 person found this helpful
          • 2. Re: Drop scope problem
            gdc88 Level 1

            Thank you!

            You can download the files here

            http://www.geekdechique.nl/drop_quiz.zip

            • 3. Re: Drop scope problem
              Zaxist Level 4

              its better to write your code in Stage > compositionReady

               

              i did this for you, and also i just made you office drag and drop only !!

               

              so you can see how its work and you can make the others by yourself

               

              Download link : http://www.mediafire.com/?390n85esr574lr9

               

              if you had any question let me know

               

              Zaxist

              1 person found this helpful
              • 4. Re: Drop scope problem
                gdc88 Level 1

                My mistake, it opens now.

                 

                Thank you so much, I go study the code and learn!

                It works like a charm!

                • 5. Re: Drop scope problem
                  Zaxist Level 4

                  i Saved it for you in version 1.5

                   

                  Download Link : http://www.mediafire.com/?vmwzfa2w78tbwqc

                   

                  Zaxist

                  • 6. Re: Drop scope problem
                    AMULI Level 4

                    Dear Zaxist,

                     

                    Thank you for your last example files. Very helpful

                     

                    Gil

                    • 7. Re: Drop scope problem
                      Zaxist Level 4

                      you're welcome dear Gil

                       

                      Zaxist

                      • 8. Re: Drop scope problem
                        ferran_morales

                        I'm working on the example you left and how I can make it activate another symbol other round dragging to another area.

                        Where I have to coner the conditional if.

                         

                         

                        thanks

                        • 9. Re: Drop scope problem
                          ferran_morales Level 1

                          // using this line would make address shorter

                          objects = sym.getSymbol("opdracht_office")

                          // in this line we used shorter address

                          // we hide message symbol by code, its better and easier that turn it off

                          objects.$("message").hide();

                           

                           

                          // with this variable we can count dropped objects

                          x = 0;

                           

                           

                           

                           

                          yepnope({nope:['jquery-ui-1.10.3.custom.min.js'], complete: init});

                           

                           

                          function init(){

                           

                           

                                    objects.$('vervoer').draggable({opacity:.5, revert:'invalid', scope:'produ'});

                                    objects.$('hotel').draggable({opacity:.5, revert:'invalid', scope:'produ'});

                                    objects.$('budget').draggable({opacity:.5, revert:'invalid', scope:'produ'});

                           

                           

                                    objects.$('productie_drop').droppable(

                                    {scope:'produ'},

                                    {drop: function () {

                                    objects.getComposition().getStage().$('message').show(); }});

                           

                           

                                    objects.$('persfoto2').draggable({opacity:.5, revert:'invalid', scope:'publi'});

                                    objects.$('drukwerk').draggable({opacity:.5, revert:'invalid', scope:'publi'});

                                    objects.$('advertentie2').draggable({opacity:.5, revert:'invalid', scope:'publi'});

                           

                           

                                    objects.$('publiciteit_drop').droppable({

                                    scope:'publi'},

                                    {drop: function () {

                                    objects.getComposition().getStage().$('message').show(); }});

                           

                           

                          // its better to code clean

                           

                           

                                    // Office Draggable

                                    objects.$('handjes').draggable({

                                                                                                                               opacity:.5,

                                                                                                                               revert :'invalid',

                                                                                                                               scope  :'office'

                                                                                                                               });

                                    objects.$('scholen').draggable({

                                                                                                                               opacity:.5,

                                                                                                                               revert :'invalid',

                                                                                                                               scope  :'office'

                                                                                                                               });

                                    objects.$('telefoon2').draggable({

                                                                                                                               opacity:.5,

                                                                                                                               revert :'invalid',

                                                                                                                               scope  :'office'

                                                                                                                               });

                                    objects.$('planning').draggable({

                                                                                                                               opacity:.5,

                                                                                                                               revert :'invalid',

                                                                                                                               scope  :'office'

                                                                                                                               });

                                    // Office Dropable

                                    objects.$('office_drop').droppable({

                                                                                                                                                  scope:'office',

                                                                                                                                                  drop : dropHandler

                                                                                                                                                  })

                           

                           

                           

                           

                                    function dropHandler(event, ui){

                              ui.draggable.draggable( 'disable' );

                              x++;

                              if ( x == 4){

                                                                                      objects.$('message').show()

                                                                                      $(this).droppable( 'disable' );

                                                                             }//if

                                    }//function

                           

                           

                           

                           

                          }// init

                          1 person found this helpful