10 Replies Latest reply on Jun 10, 2013 12:06 PM by resdesign

    Drag and drop with condition

    Benoît. Level 4

      I have 3 circles of different colors and 3 images with those similar colors.

      I would like to be able to show the corresponding color when dropping a colored circle on it.

       

      For instance, by default, the red image is visible. If I drag the blue circle on it, it will show the blue image, if I drag the purple circle on it, it will show the purple image...

       

      I can understand a bit the code when I look at it, but that's it.

      I've spent the last couple of days reading and testing turotials and messages on the forum. But no luck ! I need help ! Please :.)

       

       

      Ok, so here is where I stand.

       

      I've created a symbol ('IMAGE') with my 3 images and in the timeline of this symbol 3 differents states with labels (red, blue, purple) and I made it droppable.

      I've got my 3 colored circles made draggables (btnred, btnblue, btnpurple)

       

      I can drag the circles on the image and it plays the symbol.

      Now, I guess I would need a condition looking something like :

       

      If the red circle is dropped then play the symbol 'IMAGE' at label 'Red' and stop

      If the blue circle is dropped then play the symbol 'IMAGE' at label 'Blue' and stop

      If the purple circle is dropped then play the symbol 'IMAGE' at label 'Purple' and stop

       

      Am I on the right track ?

      Any suggestion about the code I should use ?

       

      Thank you veru much for your help.

       

      Ben

       

       

      Here's my code for the stage :

       

      http://pixelformation.ca/wp-content/uploads/2013/05/code2.png

       

      And here the content of my symbol 'IMAGE'

       

      http://pixelformation.ca/wp-content/uploads/2013/05/symbol.png

        • 1. Re: Drag and drop with condition
          Benoît. Level 4

          Please ! Pretty please ! Help !

          • 2. Re: Drag and drop with condition
            resdesign Adobe Community Professional & MVP

            I posted a sample that shows you how to change the color on drag.

            https://www.box.com/s/vtile6ea3h16g2nm1fuz

             

            I will try to give you a sample for what you want to do tonight. I am now right in the middle of something. But this sample may help you a little to see how to use events for draggable and droppable.

            1 person found this helpful
            • 3. Re: Drag and drop with condition
              Benoît. Level 4

              Thank you very much.

              I actually did see the file you posted in a previous post but maybe didn't look close enought.

              Now that I look at the Edge file included it seems to be the kind of condition I am looking for.

              Ok, I'm going to try to understand how you did it and I'll let you know if it worked.

               

              Thank you very much for your help.

               

              Ben

              • 4. Re: Drag and drop with condition
                resdesign Adobe Community Professional & MVP

                De rien!

                • 5. Re: Drag and drop with condition
                  Benoît. Level 4

                  OK, I've copied shamelessly your code and adapted it to my animation.

                  It works perfectly when I test it in the browser but it's very ramdom when I test the published html file. :.(

                  I couldn't find a way to use just one "dropcase" with 3 conditions. So I put 3 "dropcases" on top of each other. Maybe not the best way to do it.

                   

                  -----------------

                  Here's the code I ended up with :

                   

                  yepnope(

                  {

                      nope:[

                          'js/jquery-ui-1.10.3.custom.min.js',

                          'js/jquery.ui.touch-punch.min.js',

                          'css/jquery-ui-1.10.3.custom.min.css'

                       ],

                      complete: init

                  }

                  );

                   

                  function init() {

                            var stage = sym.$("Stage");

                   

                  // button_purple draggable

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

                            button_purple.draggable({ disabled: false });

                            button_purple.draggable({ containment: stage });

                            button_purple.draggable({ snap: '.target1' });

                            button_purple.draggable({ revert: true });

                            // drop in box

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

                            dropCase1.droppable({

                                      // accept only case 1

                                      accept: ".case1",

                                      drop: function(event, ui) {

                                                //play the symbol box timeline

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

                                                box.stop('1');

                                      }

                            });

                     

                            // button_blue draggable

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

                            button_blue.draggable({ disabled: false });

                            button_blue.draggable({ containment: stage });

                            button_blue.draggable({ snap: '.target2' });

                            button_blue.draggable({ revert: true });

                            // drop in box

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

                            dropCase2.droppable({

                                      // accept only case 2

                                      accept: ".case2",

                                      drop: function(event, ui) {

                                      //play the symbol box timeline

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

                                      box.stop('2');

                            }

                            });

                     

                            // button_red draggable

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

                            button_red.draggable({ disabled: false });

                            button_red.draggable({ containment: stage });

                            button_red.draggable({ snap: '.target3' });

                            button_red.draggable({ revert: true });

                            // drop in box

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

                            dropCase3.droppable({

                                      // accept only case 3

                                      accept: ".case3",

                                      drop: function(event, ui) {

                                                //play the symbol box timeline

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

                                                box.stop('3');

                                      }

                            });

                   

                             // end droppable

                  //end function init

                  }

                  • 6. Re: Drag and drop with condition
                    resdesign Adobe Community Professional & MVP

                    Good start. I will look at it tomorrow. I am sure you can use conditions so you do not have to use 3 dropcases.

                    • 7. Re: Drag and drop with condition
                      RichardAyyash

                      Hey Benoit,

                       

                      I had the same problem as you pretty much.

                       

                      I got everything to work perfectly but when I publish or upload the html 5 to test, it doesnt work at all the way it does when previewing.

                       

                      Did you find out how to get around that?

                       

                      I finished everything and was so happy until I published. I have been trying to fix it for days now.

                       

                      Please tell me you know why the file stops working when published.

                       

                      Would really appreciate it. BIGTIME.

                       

                      Thanks,

                      • 8. Re: Drag and drop with condition
                        Zaxist Level 4

                        the fact that after publishing your drag codes doesnt work is that you dont have the folder of your js in your publish folder too, you should copy some folder that you create them out of edge like js folder or css folder or any other files that you added to your project folder...

                        you should copy all of them to your publish folder...

                         

                        Zaxist

                        • 9. Re: Drag and drop with condition
                          RichardAyyash Level 1

                          Thanks a lot Zaxist!

                           

                          Got it to work thanks to you. Didnt realize that. For some reason I assumed that the publish feature would do all that for me.

                           

                          THANKS!

                          • 10. Re: Drag and drop with condition
                            resdesign Adobe Community Professional & MVP

                            Good catch Zaxist. I noticed other people trying to add their extra js files in the edge folder instead of creating their own folders and this spell TROUBLE!

                            Thanks.