18 Replies Latest reply on Apr 8, 2011 4:48 AM by Ned Murphy

    Drag and Drop in Flash ?

    khm4

      I cannot seem to

      get the script correct?

       

      Can anyone let me knwo if it is the script that incorrect or the naming etc of my movieclips..

       

      basically I want several of the movie clip pegs to be able to be dragged and dropped and snap to the targets...i will be moving the image of the call centre over the top of the targets but i have moved it aside to show that I had created the targets.

       

      All assistance is greatly appreciated.

       

      FIRSTLY.. how do i attach the the zip file???

       

      Kylie

        • 1. Re: Drag and Drop in Flash ?
          Ned Murphy Adobe Community Professional & MVP

          YOu can no longer attach files here. You will need to include your relevant code in your posting with an explanation of what you intend it to do.

          1 person found this helpful
          • 2. Re: Drag and Drop (check Code)
            khm4 Level 1

            Thanks Ned

             

            If anyone can assist in reviewing this code - please. I have look at it so many times and clearly missing something.

             

             

            I am attempting to have drag and drop objects - show hand to user when over the peg and snap to the correc target when dragged on to - display appropriate dynamic text.

             

             

            Thankyou for taking the time and assist. Kylie

             

             

            var startX:Number;
            var startY:Number;
            var counter:Number = 0

            one_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
            one_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
            two_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
            two_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
            three_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
            three_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
            four_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
            four_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
            five_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
            five_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
            six_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
            six_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);

            function pickUp(event:MouseEvent):void {
                event.target.startDrag(false);
            reply_txt.text = "Drag me";
            event.target.parent.addChild(event.target);
            startX = event.target.x;
            startY = event.target.y;
            }
            function dropIt(event:MouseEvent):void {
              event.target.stopDrag();
              var myTargetName:String = "target" + event.target.name;
              var myTarget:DisplayObject = getChildByName(myTargetName);
              if (event.target.dropTarget.parent==myTarget){
               reply_txt.text = "Good Job!";
              event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
               event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
               event.target.buttonMode = false;
               event.target.x = myTarget.x;
               event.target.y = myTarget.y;
               counter++;
            } else {
              reply_txt.text = "Try Again!";
              event.target.x = startX;
              event.tarfet.y =  startY;
            }
            if(counter== 4){
              reply_txt.text = "Congrats, you're finished!";
            }
            }

            one_mc.buttonMode = true;
            two_mc.buttonMode = true;
            three_mc.buttonMode = true;
            four_mc.buttonMode = true;
            five_mc.buttonMode = true;
            six_mc.buttonMode = true;

            • 3. Re: Drag and Drop (check Code)
              Ned Murphy Adobe Community Professional & MVP

              One thing to get things on the right track would be to use the function names that you specify for the drag and drop.  The listeners use (bolded)...

               

              one_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
              one_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);

               

              But you only have the following functions...

               

              function pickUp(event:MouseEvent):void {

               

              function dropIt(event:MouseEvent):void {

               

              Either the listeners need to use the right function names or the function names need to be changed to match what the listeners specify

              • 4. Re: Drag and Drop amended - still NO LUCK :(
                khm4 Level 1

                Thanks Ned, I have amended this - ( sorry i have changed these so many time as when I noted the different ones in tutorials I thought I may be with the different actionscript).

                 

                I still have NO LUCK. The pegs dont even drag and no hand appears???  panic stations...This project is due very soon

                 

                 

                Any more advise is greatly appreciated. I have this drag and drop on another project and it works perfectly, however I have copied and pasted that code - it doesnt work so hence my inventing the wheel.

                 

                Given the time restraints - Alternatively should I use code snippets instead on all pegs?   I'm not familiar with the snippets that will return the peg when placed incorrectly and snap the correct ones to the target.

                 

                Thanks Again Kylie

                 

                 

                var startX:Number;
                var startY:Number;
                var counter:Number = 0

                one_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                one_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                two_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                two_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                three_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                three_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                four_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                four_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                five_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                five_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                six_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                six_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);

                function clickToDrag(event:MouseEvent):void {
                    event.target.startDrag(false);
                reply_txt.text = "Drag me";
                event.target.parent.addChild(event.target);
                startX = event.target.x;
                startY = event.target.y;
                }
                function releaseToDrop(event:MouseEvent):void {
                  event.target.stopDrag();
                  var myTargetName:String = "target" + event.target.name;
                  var myTarget:DisplayObject = getChildByName(myTargetName);
                  if (event.target.dropTarget.parent==myTarget){
                   reply_txt.text = "Good Job!";
                  event.target.removeEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                   event.target.removeEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                   event.target.buttonMode = false;
                   event.target.x = myTarget.x;
                   event.target.y = myTarget.y;
                   counter++;
                } else {
                  reply_txt.text = "Try Again!";
                  event.target.x = startX;
                  event.tarfet.y =  startY;
                }
                if(counter== 4){
                  reply_txt.text = "Congrats, you're finished!";
                }
                }

                one_mc.buttonMode = true;
                two_mc.buttonMode = true;
                three_mc.buttonMode = true;
                four_mc.buttonMode = true;
                five_mc.buttonMode = true;
                six_mc.buttonMode = true;

                • 5. Re: Drag and Drop HELP Pleeeeease
                  khm4 Level 1

                  There seems to be an array of different ways to create thsi drag and

                  drop function??

                   

                  Is it a better method to have seperate as. and fla. file ??

                   

                  On my previous file i didnt but ??

                   

                   

                  Cheers Kylie

                  • 6. Re: Drag and Drop HELP Pleeeeease
                    Rothrock Level 5

                    There are an infinate number of ways to do this. Some are way better than others and many are awful and many are just so-so.

                     

                     

                    But in all of them, like Ned said, you will need to use the same function names in your addEventListeners as your code.

                     

                    fl_clipToDrag is not the same as clickToDrag

                    • 7. Code snippet for Drag, Drop and Snap to
                      khm4 Level 1

                      Thanks, Have I got             fl_clipToDrag  in my code ??

                       

                      OMG I cannot even see that.

                       

                       

                      Please if you can paste me a code snippet just using on eof my pegs for example

                       

                      one_mc

                       

                      and let me know if I should be including any reference to the targets in the code as I have named them

                       

                      targetone_mc

                       

                      And i will start from scratch AGAIN

                       

                      Cheers Kylie

                      • 8. Re: Code snippet for Drag, Drop and Snap to
                        Rothrock Level 5

                        You can't see it?

                         

                        one_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                        one_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                        two_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                        two_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                        three_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                        three_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                        four_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                        four_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                        five_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                        five_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);
                        six_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_clickToDrag);
                        six_mc.addEventListener(MouseEvent.MOUSE_UP, fl_releaseToDrop);

                         

                         

                        look at every one of these addEventListener calls. Can you see it now?

                         

                        Don't start from scratch. Fix the code you have. Those little "fl_"s will absolutely prevent this from working. The rest could be (or not) absolutely spot on, but that will break it.

                        • 9. Ok pegs are dragging BUT no drop and no snap?
                          khm4 Level 1

                          Your a savour!

                           

                           

                          No i was looking for the word clip  not the little  fl bits..thanks

                           

                           

                          OK i can drag and drop and I have my hand indicating a draggable objedt but nothing drops nor do they snap to the target when correct or return to original place when in correct... how have I messed this up..

                           

                          I may actually get thsi project in on time.

                           

                          Thanks for the encouragent not to delete and start from scratch... it just gets very frustrating.

                           

                          Kylie

                           

                           

                           

                           

                          var startX:Number;
                          var startY:Number;
                          var counter:Number = 0

                          one_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                          one_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                          two_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                          two_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                          three_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                          three_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                          four_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                          four_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                          five_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                          five_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                          six_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                          six_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);

                          function clickToDrag(event:MouseEvent):void {
                              event.target.startDrag(false);
                          reply_txt.text = "Drag me";
                          event.target.parent.addChild(event.target);
                          startX = event.target.x;
                          startY = event.target.y;
                          }
                          function releaseToDrop(event:MouseEvent):void {
                            event.target.stopDrag();
                            var myTargetName:String = "target" + event.target.name;
                            var myTarget:DisplayObject = getChildByName(myTargetName);
                            if (event.target.dropTarget.parent==myTarget){
                             reply_txt.text = "Good Job!";
                            event.target.removeEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                             event.target.removeEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                             event.target.buttonMode = false;
                             event.target.x = myTarget.x;
                             event.target.y = myTarget.y;
                             counter++;
                          } else {
                            reply_txt.text = "Try Again!";
                            event.target.x = startX;
                            event.target.y =  startY;
                          }
                          if(counter== 4){
                            reply_txt.text = "Congrats, you're finished!";
                          }
                          }

                          one_mc.buttonMode = true;
                          two_mc.buttonMode = true;
                          three_mc.buttonMode = true;
                          four_mc.buttonMode = true;
                          five_mc.buttonMode = true;
                          six_mc.buttonMode = true;

                          • 10. Re: Ok pegs are dragging BUT no drop and no snap?
                            Ned Murphy Adobe Community Professional & MVP

                            One thing you should do is use the trace function to see if you are targeting the correct things with your code.  If you see what you expect in one place, place a trace in another place and see if things are still in agreement with what yoiu expect they should be.

                             

                            function releaseToDrop(event:MouseEvent):void {
                              event.target.stopDrag();
                              var myTargetName:String = "target" + event.target.name;
                              var myTarget:DisplayObject = getChildByName(myTargetName);

                             

                            trace(event.target.name, myTarget, event.target.dropTarget.parent.name);


                              if (event.target.dropTarget.parent==myTarget){
                               reply_txt.text = "Good Job!";
                              event.target.removeEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                               event.target.removeEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                               event.target.buttonMode = false;
                               event.target.x = myTarget.x;
                               event.target.y = myTarget.y;
                               counter++;
                            } else {
                              reply_txt.text = "Try Again!";
                              event.target.x = startX;
                              event.target.y =  startY;
                            }

                            • 11. Still messy
                              khm4 Level 1

                              Ned Thanks for your help!!!

                               

                              I have fiddked and just cannot see what is going wrong.

                               

                               

                              Can you tell me.. i was under the impression that using  variable here for my target would enable me to just put the codein once ?

                               

                              Or do i still need to insert the instance name of the targets ?? in where it says myTargetName ??/

                               

                               

                               

                              function releaseToDrop(event:MouseEvent):void{event.target.stopDrag();
                              var myTargetName:String="target"+event.target.name;
                              var myTarget:DisplayObject=getChildByName(myTargetName);

                               

                               

                              My drag seems the same as my drop but in the movie the the DROP wont work assuming its the target issue.

                               

                              Any idea/

                               

                              Thanks Kylie

                              • 12. Re: Still messy
                                Ned Murphy Adobe Community Professional & MVP

                                I just tried the last full bit of code you showed and was able to successfully drag/drop one object onto its target and got told to try again for dropping it on a wrong target.  So the code seems fine.  So the problem may lie in how you named things.

                                 

                                If you named your buttons one_mc, two_mc, etc... then according to your code, the target names should be... targetone_mc, targettwo_mc, etc...

                                 

                                If I were a gambler I'd probably be willing to bet you've named the targets... target_one_mc, etc... or at least bet that you haven't named them what they should be.

                                • 13. Re: Still messy
                                  khm4 Level 1

                                  Hi Ned

                                   

                                   

                                  I can drag all the pegs and they spring back to the original position.

                                  I have named all the targets as follows

                                   

                                  targetone_mc

                                  targettwo_mc

                                  targetthree_mc

                                  targetfour_mc

                                  targetfive_mc

                                  targetsix_mc

                                   

                                  I am wanting 4 of the six pegs to snap to the corrosponding target and 2 of them I wanted to not be accepted and return to original position.

                                   

                                   

                                   

                                  my code is as follows:

                                  var startX:Number;
                                  var startY:Number;
                                  var counter:Number=0;

                                  one_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                                  one_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                                  two_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                                  two_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                                  three_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                                  three_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                                  four_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                                  four_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                                  five_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                                  five_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                                  six_mc.addEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                                  six_mc.addEventListener(MouseEvent.MOUSE_UP, releaseToDrop);

                                  function clickToDrag(event:MouseEvent):void
                                  {event.target.startDrag(false);
                                  reply_txt.text="";
                                  event.target.parent.addChild(event.target);
                                  startX = event.target.x;
                                  startY = event.target.y;
                                  }

                                  function releaseToDrop(event:MouseEvent):void
                                  {event.target.stopDrag();
                                  var myTargetName:String="target"+event.target.name;
                                  var myTarget:DisplayObject=getChildByName(myTargetName);
                                  if (event.target.dropTarget.parent==myTarget)

                                  {
                                    reply_txt.text="Good Job!";
                                    event.target.removeEventListener(MouseEvent.MOUSE_DOWN, clickToDrag);
                                    event.target.removeEventListener(MouseEvent.MOUSE_UP, releaseToDrop);
                                    event.target.buttonMode=false;
                                    event.target.x=myTarget.x;
                                    event.target.y=myTarget.y;
                                    counter++;
                                  } else {
                                    reply_txt.text="Try Again!";
                                    event.target.x=startX;
                                    event.target.y=startY;
                                  }
                                  if (counter==4) {
                                    reply_txt.text="Congrats, you're finished!";
                                  }
                                  }
                                  one_mc.buttonMode=true;
                                  two_mc.buttonMode=true;
                                  three_mc.buttonMode=true;
                                  four_mc.buttonMode=true;
                                  five_mc.buttonMode=true;

                                  six_mc.buttonMode=true;

                                   

                                  So.. it looks like the drag on mouse down works - the drop on mouse up works but the smap to target doesn't ? Any idea what in the code is missing?

                                  This is due today and the closer the time line the more I see double... Attempting to stay positive

                                  Kylie

                                  • 14. Re: Still messy
                                    Ned Murphy Adobe Community Professional & MVP

                                    As I said, the code works fine, so it is not the code.  Try taking the code into a new file and create the objects and name them as they should be.

                                    • 15. Re: Still messy
                                      Ned Murphy Adobe Community Professional & MVP

                                      One thing you might try is to use currentTarget instead of target in your drop code.  Sometimes target can point to an object inside your dropped object, but currentTarget will point to the object that has the event listener assigned...  though you should have detected if that's the problem using the trace I mentioned earlier.

                                      1 person found this helpful
                                      • 16. overlaying the targets confused things?
                                        khm4 Level 1

                                        Ned I haven't changed anything and it seems to be works ?? No idea why  but i think I may have a problem with the targets, as I created 1 for each peg wheni dont think i need one..

                                         

                                        For example all 4 of the pegs belong in the target... should i just have a single target name?

                                         

                                        As i currently have all 4 targets (alpha'd out) over the top of each other.. therefore if they dont allow the peg to snap!!

                                         

                                         

                                         

                                        Thanks Kylie

                                        • 17. Single target to accept multiple draggable objects
                                          khm4 Level 1

                                          Ok I guess what I need to know now is...

                                           

                                           

                                          how do I alter this code to allow the multiple draggable objects to be accepted by the single target?

                                           

                                          var myTargetName:String="target"+event.target.name;
                                          var myTarget:DisplayObject=getChildByName(myTargetName);
                                          if (event.target.dropTarget.parent == myTarget)

                                           

                                           

                                          for example if i have  target called      targetone_mc     where would i insert it

                                           

                                           

                                          OR do i insert several mc targets here in the code ?

                                           

                                           

                                          I am sooo close, but just not close enough

                                          Kylie

                                          • 18. Re: Single target to accept multiple draggable objects
                                            Ned Murphy Adobe Community Professional & MVP

                                            You should head back to using a trace to find out what you are dealing with in terms of dragged objects versus the targets you think you are dropping them on.  That's the main purpose of the trace function... to help you find out what you are dealing with when things aren't working as expected.

                                             

                                            Just because you have targets alpha-ed out does not make them invisible for interaction.  You can still interact with an object that has its alpha set to 0.  Only the visible property being false takes an object out of the interaction scheme.  So if you are stacking your targets one atop another, chances are only the top one is the target you hit all the time.  So when you start to drag an object you might also want to move that object's target to the top of the pile.

                                             

                                            If the goal is to place all the objects on the same target, then you need to have no other targets in the way, and that includes other dragged objects because they are as much a target as anything else when you drop something on them.  That means getting the dropped objects out of the way... moving the target atop them.  In that case, if you wanted to see the other dropped objects you would need to have the alpha of the target set to zero and once you drop an object on it, you want to move that object below it.