16 Replies Latest reply: Sep 13, 2012 12:07 PM by Ned Murphy RSS

    Newbie requesting assistance with multiple drag-and-drop & multiple targets

    fritzdaworm

      I know this question has been asked a million times, but I'm still not quite getting the solution.  I know the solution calls for me using Arrays in part of my code, but I'm having problems understading how to implement it.  I am using Flash CS 5.5 with AS3.

       

      I have a drag-and-drop flash file that is divided into 4 separate areas on the stage.  On each area, there are 7 spaces, meant for 7 different "puzzle pieces".  The first two spaces on each quadrant have very a very specific order for the correct puzzle pieces, while the additional 5 spaces on each quadrant also have specific pieces, but the order is not important.  I've included my code below for reference (note that I have not finished all of the instances, yet).

       

      Basically, in the code that's been created so far, the following instances have specific targets with specific order:

       

      D1_1_mc, D1_2_mc, D1_1_mc, D2_2_mc, D3_1_mc, D3_2_mc, D4_1_mc, and D4_2_mc.

       

      All of the other instances, such as D1_3_mc, D2_3_mc, D2_4_mc, etc... do have specific quadrants they need to be dropped onto, but in terms of the last 5 "spaces" on each quadrant, the order does not matter.  I know I can keep doing what I'm doing, but I would prefer that the last 5 pieces on each quandrant do not have to be in a specific order.

       

      Any help you can provide is greatly appreciated!

       

       

      var startX:Number;

      var startY:Number;

      var counter:Number = 0;

       

      D1_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D1_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D1_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D1_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D1_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D1_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D3_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D3_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D3_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D3_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D3_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D3_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D4_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D4_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D4_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D4_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D4_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D4_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

      D4_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

      D4_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

       

      function pickUp(event:MouseEvent):void {

          event.target.startDrag(true);

          reply_txt.text = "";

          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 != null && 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.target.y = startY;

          }

          if(counter == 5){

              reply_txt.text = "Congratulations, you've done it!";

          }

      }

       

      D1_1_mc.buttonMode = true;

      D1_2_mc.buttonMode = true;

      D1_3_mc.buttonMode = true;

      D2_1_mc.buttonMode = true;

      D2_2_mc.buttonMode = true;

      D2_3_mc.buttonMode = true;

      D2_4_mc.buttonMode = true;

      D3_1_mc.buttonMode = true;

      D3_2_mc.buttonMode = true;

      D3_2_mc.buttonMode = true;

      D4_1_mc.buttonMode = true;

      D4_2_mc.buttonMode = true;

      D4_3_mc.buttonMode = true;

      D4_4_mc.buttonMode = true;

        • 1. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
          Ned Murphy CommunityMVP

          Would it be possible for you to assign an array of allowed dropees to each of the targets so that when you drop an item on the target, the target's array is checked to see if that object is allowed to be dropped there?  Some targets would have just one element in that array, while others could have more.  Then you could just do an indexOf() check on the array to see of the dropped object is in it.

          • 2. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
            fritzdaworm Community Member

            That makes sense.  However, I am unsure of how I would actually write that in my existing code.  I'm quite new to writing ActionScript.  The only reason I knew an Array would work is because I've seen it on the other postings as a solution around this same issue.  However, most of the code I've seen seems different that what I've started with, so when I see possible solutions for how it's written and what it replaces in the original code, it's throwing me off.

            • 3. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
              Ned Murphy CommunityMVP

              I don't know how you have your targets defined, but for each one you could assign an array...

               

              target1_1_mc.allowed = new Array(D1_1_mc); // just one is okay

              target1_2_mc.allowed = new Array(D1_2_mc);  // just one is okay

              target1_3_mc.allowed = new Array(D1_3_mc,D1_4_mc); // either will be okay

               

               

              then, later on when you are checking to see if the drop is good or not you would do something like...

               

              if(MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dropTarget.parent) > -1){

                  // that's a good drop

              } else {

                  // that's a bad drop

              }

              • 4. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                fritzdaworm Community Member

                So just to confirm, I would add the Array statements at the top of my code (using the Target names I have used for instances) above the existing mouse-up/down event listeners. Then, I would go down to the existing drop function and replace this:

                 

                if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){

                 

                with this:

                 

                if(MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dro pTarget.parent) > -1){

                 

                Right?  Nothing else needs to be modified?

                • 5. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                  Ned Murphy CommunityMVP

                  No, you still need to have all your event listeners assigned from the dragging and the dropping, and it would help to leave the "event.target.dropTarget != null" part of the conditional in.

                   

                  The array statements would be separate, and you would use the actual instance names to target them instead of what I showed.

                  • 6. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                    Ned Murphy CommunityMVP

                    I should add that there is a way to simply the code assigning the event listeners, using two loops and bracket notation, but save that for later.

                    • 7. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                      fritzdaworm Community Member

                      Ok, so I just tried doing a test, but now when I run it, I get the following error (or similar) when I try to drag the objects:

                       

                      TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@2b5e7e49 to flash.display.MovieClip.

                          at TEST16658Adrag_fla::MainTimeline/dropIt()

                       

                       

                      This is what I've done with my code:

                       

                      var startX:Number;

                      var startY:Number;

                      var counter:Number = 0;

                       

                      target_D2_1_mc.allowed = new Array(D2_1_mc);

                      target_D2_2_mc.allowed = new Array(D2_2_mc);

                      target_D2_3_mc.allowed = new Array(D2_3_mc,D2_4_mc);

                       

                      D1_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D1_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D1_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D1_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D1_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D1_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D3_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D3_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D3_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D3_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D3_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D3_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D4_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D4_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D4_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D4_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D4_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D4_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                      D4_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                      D4_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                       

                      function pickUp(event:MouseEvent):void {

                          event.target.startDrag(true);

                          reply_txt.text = "";

                          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 (MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dropTarget.parent) > -1){

                              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.target.y = startY;       

                          }

                          if (event.target.dropTarget != null && 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.target.y = startY;

                          }

                          if(counter == 5){

                              reply_txt.text = "Congratulations, you've done it!";

                          }

                      }

                       

                      D1_1_mc.buttonMode = true;

                      D1_2_mc.buttonMode = true;

                      D1_3_mc.buttonMode = true;

                      D2_1_mc.buttonMode = true;

                      D2_2_mc.buttonMode = true;

                      D2_3_mc.buttonMode = true;

                      D2_4_mc.buttonMode = true;

                      D3_1_mc.buttonMode = true;

                      D3_2_mc.buttonMode = true;

                      D3_2_mc.buttonMode = true;

                      D4_1_mc.buttonMode = true;

                      D4_2_mc.buttonMode = true;

                      D4_3_mc.buttonMode = true;

                      D4_4_mc.buttonMode = true;

                      • 8. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                        Ned Murphy CommunityMVP

                        It is most likely taking exception to this:  MovieClip(event.target.dropTarget)....  I was going under the assumption that what you had was working to some degree such that the target aspects were valid.

                         

                        What you should do is put a trace just before that line to see if you can identify what your target is actually turning out to be... it sounds like it might be some Shape inside the movieclip you name  target_D2_1.  Try adding the following trace line just before the conditional...

                         

                        trace(event.target.dropTarget, event.target.dropTarget.parent)

                        if (MovieClip(event.target.dropTarget).allowed.indexOf(event.target.drop Target.parent) > -1){

                         

                        If that trace ends up showing a Shape and a MovieClip, then my bet goes on you having to use MovieClip(event.target.dropTarget.parent)... in the line that follows it.

                        • 9. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                          fritzdaworm Community Member

                          You were right.  That did seem to fix that issue, but now when I run it, I get a new error:

                           

                          TypeError: Error #1010: A term is undefined and has no properties.

                           

                          I ran the debugger and the error is related to this line in my code:

                           

                          if (MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.target.drop Target.parent) > -1){

                          • 10. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                            Ned Murphy CommunityMVP

                            Since there appeared to be afew possible discrepencies in the code you showed and what I was offering in response to your issues, I spent a little time getting a working model of what I imagine you have just using the three targets and four drop objects.  If you like, I can make the file available for you, but for the moment, here is the code that works...

                             

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

                             

                            target_D2_1_mc.allowed = new Array(D2_1_mc);
                            target_D2_2_mc.allowed = new Array(D2_2_mc);
                            target_D2_3_mc.allowed = new Array(D2_3_mc,D2_4_mc);

                             

                            D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                            D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                            D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                            D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                            D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                            D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                            D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                            D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                             

                            function pickUp(event:MouseEvent):void {

                            reply_txt.text = "Good Luck";
                                event.target.startDrag(true);
                                event.target.parent.addChild(event.target);
                                startX = event.target.x;
                                startY = event.target.y;
                            }

                             

                            function dropIt(event:MouseEvent):void {

                             

                                event.target.stopDrag();

                             

                            if (event.target.dropTarget != null && MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.target) > -1){
                                    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 = MovieClip(event.target.dropTarget.parent).x;
                                    event.target.y =MovieClip(event.target.dropTarget.parent).y;
                                    counter++;
                                } else {
                                    reply_txt.text = "Try Again!";
                                    event.target.x = startX;
                                    event.target.y = startY;       
                                }


                                if(counter == 5){
                                    reply_txt.text = "Congratulations, you've done it!";
                                }
                            }

                             

                            D2_1_mc.buttonMode = true;
                            D2_2_mc.buttonMode = true;
                            D2_3_mc.buttonMode = true;
                            D2_4_mc.buttonMode = true;

                            • 11. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                              fritzdaworm Community Member

                              Thanks.  I tried replacing all of my code with what you provided, but I'm still getting the 1010 error and the debugger is tracing it to this line:

                               

                              if (event.target.dropTarget != null && MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.target) > -1){

                               

                              Could "MovieClip" in the above statement be causing the problem?

                              • 12. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                                Ned Murphy CommunityMVP

                                Here is a link to the file I created using that code.  Maybe you can determine how yours differs and can determine what adjustment needs to be made...

                                 

                                http://www.nedwebs.com/Flash/AS3_DnD_Options.fla

                                 

                                You should make liberal use of the trace() function to track down which objects/code are causing problems.

                                • 13. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                                  fritzdaworm Community Member

                                  Ok, I just opened your file and am also getting that same error 1010 and it's related to that same line of code even within your FLA.  I am not sure why I am getting an error and you are not.  I am using Flash CS 5.5 if that helps.

                                  • 14. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                                    Ned Murphy CommunityMVP

                                    When are you getting that error.  I get it if I am trying to add the last (4th) object to the thrid target with the other object already there.  Otherwise I do not get that error.

                                     

                                    You should use the trace function before that line to see which objects in that line might be null.

                                    • 15. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                                      fritzdaworm Community Member

                                      Still not sure why I was getting that error in your FLA, but I went back to my file with the code you had list.  It turns out that I had to add another array to get it to work correct:

                                       

                                      target_D2_4_mc.allowed = new Array(D2_3_mc,D2_4_mc);

                                       

                                      Thanks so much for your help!

                                      • 16. Re: Newbie requesting assistance with multiple drag-and-drop & multiple targets
                                        Ned Murphy CommunityMVP

                                        You're welcome.  From the code you showed, I thought there were only three targets.