18 Replies Latest reply on Jan 30, 2015 12:48 PM by Zoze

    Rated drag and drop

    DragoraArch Level 1

      Hello everyone. I apologise for asking a question that has probably been answered previously. I have a dilemma with my animation that I have tried prowling the Internet for for quite some time now and I have yet to find a solution to fit what it is I'm after.

       

      The animation that I am making in Edge is a drag and drop game which gives students varied results based on how they do. Currently I have the elements dragging and dropping in their correct locations. Once they are in their locations though they do not drag again, making the students have no choice but to get everything correct. After the animation is complete the timeline plays and stops at a marker (Which will be altered based on the answers the students have provided at a later point).

       

      What I need from this animation is to:

      • allow students to drag and drop elements into both correct and incorrect locations.
      • to be able to drag them again after placing them.
      • to keep a track of the amount of elements that have been dropped.

       

      I would be incredibly grateful for any comments and feedback on this. I hope I am not the only one who has tried to do this. It feels like I am the only one who is having a problem like this!

       

      Here is my code currently as well as I am sure I am at least halfway there. The final line (sym.play();) is just for the timeline playing and will change at a later point.

       

      // insert code to be run when the composition is fully loaded here var dragForms = ['Drag1', 'Drag2', 'Drag3', 'Drag4', 'Drag5']; var dropForms = ['Drop1', 'Drop2', 'Drop3', 'Drop4', 'Drop5']; var Pos = [ {'x':29,'y':115}, {'x':29,'y':160}, {'x':29,'y':205}, {'x':29,'y':250}, {'x':29,'y':295} ]; Pos.sort(function() {return 0.5 - Math.random()}); for (i=0;i

        • 1. Re: Rated drag and drop
          DragoraArch Level 1

          Sorry, my code got cut off there:

          // insert code to be run when the composition is fully loaded here

          var dragForms = ['Drag1', 'Drag2', 'Drag3', 'Drag4', 'Drag5'];

          var dropForms = ['Drop1', 'Drop2', 'Drop3', 'Drop4', 'Drop5'];

           

           

          var Pos = [

            {'x':29,'y':115},  {'x':29,'y':160},  {'x':29,'y':205},  {'x':29,'y':250},  {'x':29,'y':295}

          ];

           

          Pos.sort(function() {return 0.5 - Math.random()});

           

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

            sym.$(dragForms[i]).css({"left":Pos[i].x,"top":Pos[i].y,"position":"absolute"});

            sym.$(dragForms[i]).addClass('C'+i);

            sym.$('.C'+i).draggable({

            revert: 'invalid'

            });

           

            sym.$(dropForms[i]).droppable({

            accept:'.C'+i,   // use class for accept

            drop: handleDropEvent

            });

          }

           

          k=0;

          function handleDropEvent(event, ui){

              ui.draggable.draggable( 'disable' );

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

              // place draggable where needed. could be left, top

              // ui.draggable.position( { of: $(this), my: 'left', at: 'top' } );

              ui.draggable.position( { of: $(this), my: 'center', at: 'middle' } );

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

              k++;

              if (k==5){

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

            sym.getSymbol(dragForms[i]).play();

            sym.play();

            }

             }

          }

          1 person found this helpful
          • 2. Re: Rated drag and drop
            resdesign Adobe Community Professional & MVP

            Very familiar code!

             

            To allow being able to move the draggables, try to comment out this line:

               

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

            • 3. Re: Rated drag and drop
              DragoraArch Level 1

              Hello Res,

               

              This code is a slight alteration of an example you provided on a past question!

               

              Unfortunately that hasn't seemed to work in this case.

              • 4. Re: Rated drag and drop
                resdesign Adobe Community Professional & MVP

                Sorry I missed the following part to comment out this and see how it goes:

                    ui.draggable.draggable( 'disable' );

                   

                • 5. Re: Rated drag and drop
                  DragoraArch Level 1

                  Hello Res,

                   

                  They can move again once dropped! Thank you very much! I still need to do a few more things in order to get the desired result. I hope it's okay to keep asking.

                   

                  I still need to allow them to drop into other areas, as opposed to just themselves, and snap back to their original location if dragged off of the drop zones.

                   

                  Additionally I need two counters. One for logging a correct drop and another for logging how many have been dropped in total (Max of 5). The latter here I can do quite easily, but logging a value based on the correct drop I imagine I will need assistance with.

                   

                  Thank you so much for your help so far. I will have a look around for more information about correct drop location drop scoring.

                  • 6. Re: Rated drag and drop
                    DragoraArch Level 1

                    Hello, would it be alright if I bumped this thread a bit? I am still unable to produce the outcome I am after with this drag and drop.

                     

                    Currently with the file it is possible to drag and drop elements to their correct locations, and have them being able to move after being placed in the correct location.

                     

                    I still need to achieve the following:

                    • Have elements being able to be placed in incorrect locations
                    • Have elements return to their default positions after being dragged (This is currently possible UNLESS the user places the element in the correct location. Then it snaps back to that location and that location only).

                     

                    Any help on this matter is very much appreciated. Time is starting to run out as I will not be able to work on this for much longer (My placement ends in September and I would really live to leave my employer with a working drag and drop game that has been developed in HTML), so responses are very sought after for me.

                     

                    Kind regards,

                    Alexi

                    • 7. Re: Rated drag and drop
                      Aubrey Scarza Level 2

                      Have you already watched Paul Trani's tutorials?

                      Drag and Drop in Edge Animate - YouTube

                      Drag and Drop in Edge Animate Part 2: Multiple with Touch - YouTube

                       

                       

                      Or try adding a scope to your droppable target and placeholder where your draggable starts from.

                      Droppable Widget | jQuery UI API Documentation

                      1 person found this helpful
                      • 8. Re: Rated drag and drop
                        DragoraArch Level 1

                        Good afternoon Aubrey, I have no tried using a scope yet. I was unaware they even existed until just now! Thank you for your feedback. I will have a test with scope tomorrow morning. I have watched Paul Trani's videos regarding dragging and dropping, however what I am after is a little bit more specific I'm afraid. Whilst his video was very useful, it wasn't usable for me in this instance with what I am aiming to do.

                        • 9. Re: Rated drag and drop
                          DragoraArch Level 1

                          Good morning Aubrey, I am reading up on Scopes and have an idea of what I'd like to try, but I am pretty stumped as to how I will implement it! My plan is to assign each drop zone two different scopes, one for a correct drop and one for an incorrect drop. Each drag item will ideally have a reference to the correct drop target, and all other targets will be incorrect, allowing the drag item to be placed on the incorrect location. I will continue researching and will try to test this out in my project, but is this something that is possible? If it is then I imagine it wouldn't be much more to set another scope target for the initial position of the drag items to be placed back to. Thank you in advance for any help and feedback!

                           

                          Update: Just realised a slight problem with this. As the content is all in an array that gets iterated through there cannot be individual identifiers. Was there some way around this too or will I have to separate the array? The array is also used for positioning the drag items randomly, which is important as the original Flash file also did this.

                          • 10. Re: Rated drag and drop
                            Aubrey Scarza Level 2

                            It might be better to set variables to each draggable item on the start function of being dragged, then in the drop function set if statements. This is some code I have in a project..

                             

                            sym.$('s_133_dont_4').draggable({

                            revert: "invalid", 

                              start: function( event, ui )

                               {

                                drop8=1;

                                icon8_done=1;    

                               }});

                             

                             

                            sym.$('img_133_towerbox').droppable(
                              {
                               drop: function( event, ui )
                               {
                                ui.draggable.position( { of: $(this), my: 'center', at: 'middle' } );

                                if (drop1 ==1)
                                {
                                 sym.getSymbol('s_133_do_1').playReverse("l_ins_do_q1_out");
                                 drop1=0;        
                                }

                             

                            I don't think I can help much further as I haven't made a drag drop using an array or random. Sorry, I hope you get the help you require!



                            1 person found this helpful
                            • 11. Re: Rated drag and drop
                              ClintRuddle Level 1

                              HI DragoraArch  did you find a solution to this? I need to do the same.

                              • 12. Re: Rated drag and drop
                                DragoraArch Level 1

                                Hi Clint, unfortunately I did not have enough time during my placement year in industry to finish this project or get the drag and drop fully working, which is quite a shame. My trail period of Edge Animate also ran out too. I would love to come back to this and complete it one day and I will definitely keep this post updated with any progress made. In the meantime however I have to leave it as it is as I am in my final year of university.

                                • 13. Re: Rated drag and drop
                                  resdesign Adobe Community Professional & MVP

                                  Clint, Please check out my samples here. maybe this will help you.

                                  ! simple draggable.zip - Box

                                  • 14. Re: Rated drag and drop
                                    Zoze Level 2

                                    Hi,

                                     

                                    Excellent helpfull demonstration for dragNdrop.

                                     

                                    I am trying to place if else condition with no success.

                                     

                                    I've changed the code to this

                                     

                                    f

                                    for (i=0;i<3;i++){

                                      sym.$(draggableEl[i]).addClass('C');

                                      sym.$('.C').draggable({

                                      revert: 'invalid'

                                    });

                                      sym.$(droppableEl[0]).droppable({

                                      accept:'.C',   // use class for accept

                                      drop: handleDropEvent

                                      });

                                     

                                     

                                    }

                                     

                                     

                                    for (i=3;i<6;i++){

                                      sym.$(draggableEl[i]).addClass('CB');

                                      sym.$('.CB').draggable({

                                      revert: 'invalid'

                                    });

                                      sym.$(droppableEl[5]).droppable({

                                      accept:'.CB',   // use class for accept

                                      drop: handleDropEvent

                                      });

                                     

                                     

                                    }

                                     

                                     

                                    and I want:

                                     

                                    if drag fruit with class "C" to basket5

                                    to alert ("This fruit is for Basket0");

                                     

                                    else if drag fruit with class "C" to basket0

                                    to alert ("Excellent, Right Basket");

                                     

                                     

                                    if drag fruit with class "CB" to basket0

                                    to alert ("This fruit is for Basket5");

                                     

                                    else if drag fruit with class "CB" to basket5

                                    to alert ("Excellent, Right Basket");

                                     

                                     

                                     

                                    How can I done it?

                                     

                                     

                                    Can you help me?

                                     

                                    Thank you!

                                    • 15. Re: Rated drag and drop
                                      Zoze Level 2

                                      I tried with scope:

                                       

                                      and makean if such:

                                       

                                      if ($(this).scope == ui.draggable.scope)

                                      {

                                      ....

                                      )

                                      else if ($(this).scope != ui.draggable.scope){

                                      }

                                       

                                      but with no success.

                                      • 16. Re: Rated drag and drop
                                        Zoze Level 2

                                        neither this way is working

                                         

                                         

                                        sym.$(droppableEl[0]).droppable({

                                          accept:'.C',   // use class for accept

                                           over: function(){ if(ui.draggable.hasClass("C"))

                                                 {

                                                      alert('Correct');

                                                 }

                                                 else

                                                 {

                                                      alert('Incorrect');

                                                 } },  

                                         

                                         

                                          drop: handleDropEvent

                                          });

                                        • 17. Re: Rated drag and drop
                                          resdesign Adobe Community Professional & MVP

                                          Could you post your file so I can correct it?

                                          • 18. Re: Rated drag and drop
                                            Zoze Level 2

                                            Hi,

                                             

                                            I am working on your example files.

                                             

                                            Here it is with my modification, there isn't something special inside. The code is too dirty.

                                             

                                            Dropbox - ! simple draggable.zip