3 Replies Latest reply on Oct 29, 2010 8:25 AM by sosodef_1

    drag and drop activity

    sosodef_1

      Hi all,

       

      I need some help - i'm new to flash AS3. I am trying to create an drag drop activity where the user can match words and meanings by dropping and dragging into the right space.

       

      At the moment I want to create multiple drop areas for the boxes. At the moment they will only fall within their own target area - also only the boxes move and not the text. How do i create mutiple
      drop areas for the words and meanings?

       

      Here's my code

       

      var objectoriginalX:Number;
      var objectoriginalY:Number;

       

      metal_mc.buttonMode = true;
      metal_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
      metal_mc.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      nonmetal_mc.buttonMode = true;
      nonmetal_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
      nonmetal_mc.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      metalloid_mc.buttonMode = true;
      metalloid_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
      metalloid_mc.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      function pickupObject(event:MouseEvent):void {
      event.target.startDrag(true);
      event.target.parent.addChild(event.target);
      objectoriginalX = event.target.x;
      objectoriginalY = event.target.y;
      }
      function dropObject(event:MouseEvent):void {
      event.target.stopDrag();
      var matchingTargetName:String = "target" + event.target.name;
      var matchingTarget:DisplayObject = getChildByName(matchingTargetName);
      if (event.target.dropTarget != null && event.target.dropTarget.parent == matchingTarget){
      event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
      event.target.removeEventListener(MouseEvent.MOUSE_UP, dropObject);
      event.target.buttonMode = false;
      event.target.x = matchingTarget.x;
      event.target.y = matchingTarget.y;
      } else {
      event.target.x = objectoriginalX;
      event.target.y = objectoriginalY;
      }
      }

       


      http://megaswf.com/serve/64618/

       

      Thanks so much. Even if you a place where i can find that kind of tutorial would be much appreciated.

       

      sosodef

        • 2. Re: drag and drop activity
          Ned Murphy Adobe Community Professional & MVP

          The controls that only allow the objects to be placed on their correct targets is in the following conditional....

           

          if (event.target.dropTarget != null && event.target.dropTarget.parent == matchingTarget){
             event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
             event.target.removeEventListener(MouseEvent.MOUSE_UP, dropObject);
             event.target.buttonMode = false;
             event.target.x = matchingTarget.x;
             event.target.y = matchingTarget.y;
          } else {
             event.target.x = objectoriginalX;
             event.target.y = objectoriginalY;
          }

           

          That code says...

           

          if(you drop an object on something, and you dropped the object on its correct target){

              disable it and paste it to the target location

          } else {

              move it back where it started

          }

           

          So what you need to do to allow any object to be placed on a target is change the requirements...

           

          if (event.target.dropTarget != null){
             event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
             event.target.removeEventListener(MouseEvent.MOUSE_UP, dropObject);
             event.target.buttonMode = false;
             event.target.x = matchingTarget.x;
             event.target.y = matchingTarget.y;
          } else {
             event.target.x = objectoriginalX;
             event.target.y = objectoriginalY;
          }


          Now that is just a start on the logic because there are probably certain conditions you want to manage, like maybe you don't want to disable the ability to move the object when it is dropped on a target... or maybe you need to confirm it is dropped on a  target and not some other object like a buttons or something... or maybe you want to record whether the object is on it its correct target.

           

          The key to resolving the code is to first understand what it is doing and then to manipulate it to do what you want.

          • 3. Re: drag and drop activity
            sosodef_1 Level 1

            Thanks Ned.

             

            I'll try and explore the code again. I know what I want to do its just finding the right code to insert so that it does it which takes so long, since I a novice with writing the code and a couple of books I've looked through don't seem too helpful either.

             

            Many thanks,