6 Replies Latest reply on Oct 30, 2010 6:47 AM by Ned Murphy

    drag drop objects to multiple target areas

    sosodef_1

      Hi,

       

      I am trying to  make a quiz on metals. I have several elements which i want to fall into  multiple target areas (e.g. the target areas are shaded grey in the  following swf; metal_mc, nonmetal_mc, metalloid_mc). I can make  individuals match to target areas (as there are tutorials for that) but i  want each one to be able to slide in to any target area (and someday i  want to create a solve button which will then place each element in the  correct place).

       

      http://megaswf.com/serve/65365/

       

      I  have started all over and have designated only chlorine to move (for  the moment) but how do i code it to allow it to fall into any of the  grey areas?

       

      var objectoriginalX:Number;
      var objectoriginalY:Number;
      chlorine_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      chlorine_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      function pickUp(event:MouseEvent):void {
          event.target.startDrag(true);
      }
      function dropIt(event:MouseEvent):void {
          event.target.stopDrag();
      }
      chlorine_mc.buttonMode = true;

       


      function pickupObject(event:MouseEvent):void {
      event.target.startDrag(true);
      event.target.parent.addChild(event.target);
      objectoriginalX = event.target.x;
      objectoriginalY = event.target.y;
      }

       

       

      (I would like to do it in AS3)

       

      any ideas or other similar tutorials most appreciated.

       

      many thanks,

       

      sosodef

        • 1. Re: drag drop objects to multiple target areas
          Ned Murphy Adobe Community Professional & MVP

          THe code you have now should allow you to drag and drop anywhere you please.  If you want to have the dragged objects be able to drop and align to any target, but only targets, then you should store the instance names of the targets in an array and then use the Array.indexOf() method to see if that target object is one of the allowed targets in the array.

          1 person found this helpful
          • 2. Re: drag drop objects to multiple target areas
            sosodef_1 Level 1

            Hi Ned,

             

            I now have this, which allows drag and drop anywhere. But theres an error with the bold lines, and i am trying to make a reset button, but thats not working either.

             

             

            //reset button
            reset_btn.onRelease = function() {
            draggableObjects:startX;
            draggableObjects:startY;

             

            }

             


            var startX:Number;
            var startY:Number;
            var counter:Number = 0;
            // array of targets
            // array is populated with INSTANCES - not names
            var dropTargets:Array = [targetmetal_mc, targetmetal_mc, targetmetalloid_mc, targetnonmetal_mc];
            // array of draggable objects
            var draggableObjects:Array = [chlorine_mc, sulfur_mc, silicon_mc, sodium_mc];

            function activateDraggables():void {
                 for (var i:int = 0; i < draggableObjects.length; i++) {
                      draggableObjects[i].buttonMode = true;
                      draggableObjects[i].addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                 }
            }

             

            // add listeners to dragable objects
            activateDraggables();

            function pickUp(event:MouseEvent):void {
                 // add listener to stage to prevent stickiness
                 stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                 event.target.startDrag();
                 startX = event.target.x;
                 startY = event.target.y;
            }

            function dropIt(event:MouseEvent):void {
                 event.target.stopDrag();
                 stage.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
                 if (event.target.dropTarget && dropTargets.indexOf(event.target.dropTarget) > -1){
                      event.target.x = event.target.dropTarget.x;
                      event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                      event.target.buttonMode = false;
                      counter ++;
                      trace(counter);
                 }
                else{
                      event.target.x=startX;
                      event.target.y=startY;
                }

                if (counter >= draggableObjects.length) {
                      gotoAndStop(2);
                }
            }

             

            stop();

             

             

            any ideas welcomed.


            thanks.

            • 3. Re: drag drop objects to multiple target areas
              Ned Murphy Adobe Community Professional & MVP

              Switched from red to bold, eh... almost had to tell you to do that....

               

              The first set of code you bolded is AS2, and as is it doesn't make any sense.  What are these lines trying to accomplish?

               

              draggableObjects:startX;
              draggableObjects:startY;

               

              For the conditional, you should trace the event.target.dropTarget to see what you are actually dealing with.  I believe your code from yesterday had that part right.

              1 person found this helpful
              • 4. Re: drag drop objects to multiple target areas
                sosodef_1 Level 1

                thanks for your reply.

                 

                i thought this code would reset the positions of the draggable objects:

                 

                draggableObjects:startX;
                draggableObjects:startY;

                 

                But it didn't work. Yesterday's code had this:

                 

                if (event.target.dropTarget && dropTargets.indexOf(e.target.dropTarget) > -1){

                 

                but that didn't work. So i changed the e to event but the objects don't snap into any target but they will sit anywhere.

                 

                what do you mean by [trace the event.target.dropTarget] ?

                 

                thanks.

                • 5. Re: drag drop objects to multiple target areas
                  Ned Murphy Adobe Community Professional & MVP

                  If you are not familiar with using the trace function, you should become familiar with it ASAP.  It is made for troubleshooting... it is your firend in finding things out.

                   

                  If you place...

                   

                  trace(event.target.dropTarget);

                   

                  before your conditional line, you will see what you are actually looking at wrt the dropTarget.  Your code from yesterday is not what you just showed, it was...

                   

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

                   

                  As for that first bit of code, remove it for now.  It is AS2 which will not work in an AS3 file, and the stuff inside the function is not legitimate code in any AS version.

                  1 person found this helpful
                  • 6. Re: drag drop objects to multiple target areas
                    Ned Murphy Adobe Community Professional & MVP

                    If you are still trying to get it working, you need to use event.target.dropTarget.parent in order to point to the movieclips that are the targets, like you had yesterday.  event.target.dropTarget points to what is inside those target movieclips.