Flash AS3 - Drag and drop multiple objects to multiple targets











up vote
0
down vote

favorite












I have multiple objects to drag to multiple targets.
I have a code without error.
I am using multiple functions. But I wonder if I pass the objects and the specific target with one function like dropIt since I have more objects and duplicated functions.



This picture is what I want to implement.
enter image description here
and the code is as follows.



Thanks in advance.





 var obj1:Array = [obj_1, obj_10];
var obj2:Array = [obj_2, obj_20];

for each(var redsMC:MovieClip in reds)
{
obj1MC.buttonMode = true;
obj1MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
obj1MC.addEventListener(MouseEvent.MOUSE_UP, dropIt);
obj1MC.startX = obj1MC.x;
obj1MC.startY = obj1MC.y;
}

for each(var orangesMC:MovieClip in oranges)
{
obj2MC.buttonMode = true;
obj2MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
obj2MC.addEventListener(MouseEvent.MOUSE_UP, dropIt1);
obj2MC.startX = obj2MC.x;
obj2MC.startY = obj2MC.y;
}


function pickUp(event:MouseEvent):void
{
event.target.startDrag(true);
event.target.parent.addChild(event.target);

}


function dropIt(event:MouseEvent):void
{
event.target.stopDrag();

if(event.target.hitTestObject(target1)){
event.target.buttonMode = false;
event.target.x = target1.x;
event.target.y = target1.y;

}else if(event.target.hitTestObject(target10)){
event.target.buttonMode = false;
event.target.x = target10.x;
event.target.y = target10.y;
}

else
{
event.target.x = event.target.startX;
event.target.y = event.target.startY;
event.target.buttonMode = true;
}
}

function dropIt1(event:MouseEvent):void
{
event.target.stopDrag();

if(event.target.hitTestObject(target2)){
event.target.buttonMode = false;
event.target.x = target2.x;
event.target.y = target2.y;

}else if(event.target.hitTestObject(target20)){
event.target.buttonMode = false;
event.target.x = target20.x;
event.target.y = target20.y;
}

else
{
event.target.x = event.target.startX;
event.target.y = event.target.startY;
event.target.buttonMode = true;
}
}









share|improve this question


























    up vote
    0
    down vote

    favorite












    I have multiple objects to drag to multiple targets.
    I have a code without error.
    I am using multiple functions. But I wonder if I pass the objects and the specific target with one function like dropIt since I have more objects and duplicated functions.



    This picture is what I want to implement.
    enter image description here
    and the code is as follows.



    Thanks in advance.





     var obj1:Array = [obj_1, obj_10];
    var obj2:Array = [obj_2, obj_20];

    for each(var redsMC:MovieClip in reds)
    {
    obj1MC.buttonMode = true;
    obj1MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    obj1MC.addEventListener(MouseEvent.MOUSE_UP, dropIt);
    obj1MC.startX = obj1MC.x;
    obj1MC.startY = obj1MC.y;
    }

    for each(var orangesMC:MovieClip in oranges)
    {
    obj2MC.buttonMode = true;
    obj2MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    obj2MC.addEventListener(MouseEvent.MOUSE_UP, dropIt1);
    obj2MC.startX = obj2MC.x;
    obj2MC.startY = obj2MC.y;
    }


    function pickUp(event:MouseEvent):void
    {
    event.target.startDrag(true);
    event.target.parent.addChild(event.target);

    }


    function dropIt(event:MouseEvent):void
    {
    event.target.stopDrag();

    if(event.target.hitTestObject(target1)){
    event.target.buttonMode = false;
    event.target.x = target1.x;
    event.target.y = target1.y;

    }else if(event.target.hitTestObject(target10)){
    event.target.buttonMode = false;
    event.target.x = target10.x;
    event.target.y = target10.y;
    }

    else
    {
    event.target.x = event.target.startX;
    event.target.y = event.target.startY;
    event.target.buttonMode = true;
    }
    }

    function dropIt1(event:MouseEvent):void
    {
    event.target.stopDrag();

    if(event.target.hitTestObject(target2)){
    event.target.buttonMode = false;
    event.target.x = target2.x;
    event.target.y = target2.y;

    }else if(event.target.hitTestObject(target20)){
    event.target.buttonMode = false;
    event.target.x = target20.x;
    event.target.y = target20.y;
    }

    else
    {
    event.target.x = event.target.startX;
    event.target.y = event.target.startY;
    event.target.buttonMode = true;
    }
    }









    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I have multiple objects to drag to multiple targets.
      I have a code without error.
      I am using multiple functions. But I wonder if I pass the objects and the specific target with one function like dropIt since I have more objects and duplicated functions.



      This picture is what I want to implement.
      enter image description here
      and the code is as follows.



      Thanks in advance.





       var obj1:Array = [obj_1, obj_10];
      var obj2:Array = [obj_2, obj_20];

      for each(var redsMC:MovieClip in reds)
      {
      obj1MC.buttonMode = true;
      obj1MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      obj1MC.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      obj1MC.startX = obj1MC.x;
      obj1MC.startY = obj1MC.y;
      }

      for each(var orangesMC:MovieClip in oranges)
      {
      obj2MC.buttonMode = true;
      obj2MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      obj2MC.addEventListener(MouseEvent.MOUSE_UP, dropIt1);
      obj2MC.startX = obj2MC.x;
      obj2MC.startY = obj2MC.y;
      }


      function pickUp(event:MouseEvent):void
      {
      event.target.startDrag(true);
      event.target.parent.addChild(event.target);

      }


      function dropIt(event:MouseEvent):void
      {
      event.target.stopDrag();

      if(event.target.hitTestObject(target1)){
      event.target.buttonMode = false;
      event.target.x = target1.x;
      event.target.y = target1.y;

      }else if(event.target.hitTestObject(target10)){
      event.target.buttonMode = false;
      event.target.x = target10.x;
      event.target.y = target10.y;
      }

      else
      {
      event.target.x = event.target.startX;
      event.target.y = event.target.startY;
      event.target.buttonMode = true;
      }
      }

      function dropIt1(event:MouseEvent):void
      {
      event.target.stopDrag();

      if(event.target.hitTestObject(target2)){
      event.target.buttonMode = false;
      event.target.x = target2.x;
      event.target.y = target2.y;

      }else if(event.target.hitTestObject(target20)){
      event.target.buttonMode = false;
      event.target.x = target20.x;
      event.target.y = target20.y;
      }

      else
      {
      event.target.x = event.target.startX;
      event.target.y = event.target.startY;
      event.target.buttonMode = true;
      }
      }









      share|improve this question













      I have multiple objects to drag to multiple targets.
      I have a code without error.
      I am using multiple functions. But I wonder if I pass the objects and the specific target with one function like dropIt since I have more objects and duplicated functions.



      This picture is what I want to implement.
      enter image description here
      and the code is as follows.



      Thanks in advance.





       var obj1:Array = [obj_1, obj_10];
      var obj2:Array = [obj_2, obj_20];

      for each(var redsMC:MovieClip in reds)
      {
      obj1MC.buttonMode = true;
      obj1MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      obj1MC.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      obj1MC.startX = obj1MC.x;
      obj1MC.startY = obj1MC.y;
      }

      for each(var orangesMC:MovieClip in oranges)
      {
      obj2MC.buttonMode = true;
      obj2MC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      obj2MC.addEventListener(MouseEvent.MOUSE_UP, dropIt1);
      obj2MC.startX = obj2MC.x;
      obj2MC.startY = obj2MC.y;
      }


      function pickUp(event:MouseEvent):void
      {
      event.target.startDrag(true);
      event.target.parent.addChild(event.target);

      }


      function dropIt(event:MouseEvent):void
      {
      event.target.stopDrag();

      if(event.target.hitTestObject(target1)){
      event.target.buttonMode = false;
      event.target.x = target1.x;
      event.target.y = target1.y;

      }else if(event.target.hitTestObject(target10)){
      event.target.buttonMode = false;
      event.target.x = target10.x;
      event.target.y = target10.y;
      }

      else
      {
      event.target.x = event.target.startX;
      event.target.y = event.target.startY;
      event.target.buttonMode = true;
      }
      }

      function dropIt1(event:MouseEvent):void
      {
      event.target.stopDrag();

      if(event.target.hitTestObject(target2)){
      event.target.buttonMode = false;
      event.target.x = target2.x;
      event.target.y = target2.y;

      }else if(event.target.hitTestObject(target20)){
      event.target.buttonMode = false;
      event.target.x = target20.x;
      event.target.y = target20.y;
      }

      else
      {
      event.target.x = event.target.startX;
      event.target.y = event.target.startY;
      event.target.buttonMode = true;
      }
      }






      actionscript-3 flash






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 11 at 5:05









      Jane

      446




      446
























          2 Answers
          2






          active

          oldest

          votes

















          up vote
          2
          down vote



          accepted










          You should somehow make your draggable objects know their targets, thus when your SWF registers an end drag event, the object that was being dragged would check against its target and if not colliding, then float/jump back. Since your objects derive from MovieClips, it's possible to add custom properties to them without doing any declarations, but be sure to check if there is something in a custom property before using it. Let's say you have assigned each draggable object a desiredTarget as whatever target you need them to be dragged. Then, you can do like this:



          function dropIt(e:MouseEvent):void {
          var desiredTarget:MovieClip=e.target.desiredTarget as MovieClip; // get where this should be placed
          e.target.stopDrag(); // we still need to release the dragged object
          if (!desiredTarget) return; // no target - nothing to do (also helps with debug)
          if (e.target.hitTestObject(desiredTarget)) {
          e.target.buttonMode=false;
          e.target.x=desiredTarget.x;
          e.target.y=desiredTarget.y;
          } else {
          // move dragged object back to starting position
          e.target.x=e.target.startX;
          e.target.y=e.target.startY;
          }
          }





          share|improve this answer





















          • OP explicitly stated that each object can have multiple targets. Add addDesired method that allows to form desired lists for each object and iterate through appropriate list inside dropIt method.
            – Organis
            Nov 11 at 7:55










          • @Organis Well, then one just needs to iterate against an array of those targets.
            – Vesper
            Nov 11 at 12:04










          • Thanks a lot, I am going to try to finish the code.
            – Jane
            Nov 11 at 16:37


















          up vote
          1
          down vote













          Despite the fact Vesper's answer is already accepted, I think it to be far too brief and insufficient, on top of that it doesn't actually answer how to design a system where any number of objects could be dropped to any number of targets, without substantial changes to the code.



          // Unlike the Object class, that allows String keys only
          // the Dictionary class allows you to store and
          // access data by the object instance.
          var theValids:Dictionary = new Dictionary;

          // We'll store the original (x,y) coordinates here.
          var theOrigin:Point = new Point;

          // The Sprite class is the superclass of MovieClip, furthermore,
          // the startDrag method defined for Sprite class, so unless you
          // create your own dragging code, you are bound to use Sprites,
          // while you cannot drag SimpleButtons and TextFields this way.
          // We'll store the current dragged object here.
          var theObject:Sprite;

          // This first argument is the object you want to be draggable.
          // The "...targets:Array" means you can call this method with
          // any number of arguments, the first one is mandatory, the
          // rest will be passed in a form of Array (empty Array if you
          // call this method with a single argument).
          function setupDraggable(source:Sprite, ...targets:Array):void
          {
          // Make the object draggable.
          source.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
          source.mouseChildren = false;
          source.mouseEnabled = true;
          source.buttonMode = true;

          // Keep the list of the object's targets so it can be
          // retrieved later by the key of the object itself.
          theValids[source] = targets;
          }

          // Ok, let's setup the objects and link them to their designated
          // targets. The whole point of the rest of the code is to make
          // this one part as simple as it possible: you just edit
          // these lines to tell which one objects go where.

          // This object can be dropped to a single target.
          setupDraggable(obj_1 , target1);

          // These objects can go to two targets each.
          setupDraggable(obj_10, target1, target10);
          setupDraggable(obj_2 , target2, target20);

          // This one object can be dropped to any of targets.
          setupDraggable(obj_20, target1, target10, target2, target20);

          // The MOUSE_DOWN event handler.
          function onDown(e:MouseEvent):void
          {
          // Get the reference to the object under the mouse.
          theObject = e.currentTarget as Sprite;

          // Keep the object's initial position.
          theOrigin.x = theObject.x;
          theOrigin.y = theObject.y;

          // Put the dragged object on top of anything else.
          // We are operating in the parent context of all these
          // objects here so there's no need to address anObj.parent.
          setChildIndex(theObject, numChildren - 1);

          // Start dragging.
          theObject.startDrag(true);

          // Listen to the MOUSE_UP event, which could happen offstage
          // and out of the dragged object, so the only reliable
          // way is to listen it from the Stage. That's why we
          // are keeping theObject reference as an additional
          // variable, without relying on event's data.
          stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
          }

          // The MOUSE_UP event handler.
          function onUp(e:MouseEvent):void
          {
          // Unsubscribe the MOUSE_UP event handler.
          stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);

          // Stop the dragging process.
          theObject.stopDrag();

          // Let's assume there could be more than a single collision.
          // We need to figure the one target that is closest.
          var theTarget:DisplayObject;
          var theDistance:int = 100000;

          // Store the dragged object position so we can
          // measure distances to the valid collisions, if any.
          var thePlace:Point = theObject.localToGlobal(new Point);

          // Now, the magic. Lets browse through the
          // valid targets and see if there's a collision.
          for each (var aTarget:DisplayObject in theValids[theObject])
          {
          if (theObject.hitTestObject(aTarget))
          {
          // Let's see if the current collision is closer
          // to the dragged object, than the previous one
          // (if any, that's what initial 100000 for).
          var aPlace:Point = aTarget.localToGlobal(new Point);
          var aDistance:int = Point.distance(aPlace, thePlace);

          if (aDistance < theDistance)
          {
          theTarget = aTarget;
          theDistance = aDistance;
          }
          }
          }

          // If there's at least one collision,
          // this variable will not be empty.
          if (theTarget)
          {
          // Make the object non-interactive.
          theObject.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
          theObject.mouseEnabled = false;
          theObject.buttonMode = false;

          // Glue the dragged object to the center of the target.
          theObject.x = theTarget.x;
          theObject.y = theTarget.y;
          }
          else
          {
          // If we're here, that means there was no valid collisions,
          // lets return the object to its designated place.
          theObject.x = theOrigin.x;
          theObject.y = theOrigin.y;
          }

          // Clean-up. Remove the reference, the object is no longer
          // being dragged, so you won't need to keep it.
          theObject = null;
          }


          P.S. I didn't test it, but I think I put enough comments to explain the whole idea.






          share|improve this answer























          • Thanks a lot Organis, I am tying to figure it out. I am struggling to work with whole code. However, your comment is really helpful for me. Thanks.
            – Jane
            Nov 11 at 16:36











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246001%2fflash-as3-drag-and-drop-multiple-objects-to-multiple-targets%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          2
          down vote



          accepted










          You should somehow make your draggable objects know their targets, thus when your SWF registers an end drag event, the object that was being dragged would check against its target and if not colliding, then float/jump back. Since your objects derive from MovieClips, it's possible to add custom properties to them without doing any declarations, but be sure to check if there is something in a custom property before using it. Let's say you have assigned each draggable object a desiredTarget as whatever target you need them to be dragged. Then, you can do like this:



          function dropIt(e:MouseEvent):void {
          var desiredTarget:MovieClip=e.target.desiredTarget as MovieClip; // get where this should be placed
          e.target.stopDrag(); // we still need to release the dragged object
          if (!desiredTarget) return; // no target - nothing to do (also helps with debug)
          if (e.target.hitTestObject(desiredTarget)) {
          e.target.buttonMode=false;
          e.target.x=desiredTarget.x;
          e.target.y=desiredTarget.y;
          } else {
          // move dragged object back to starting position
          e.target.x=e.target.startX;
          e.target.y=e.target.startY;
          }
          }





          share|improve this answer





















          • OP explicitly stated that each object can have multiple targets. Add addDesired method that allows to form desired lists for each object and iterate through appropriate list inside dropIt method.
            – Organis
            Nov 11 at 7:55










          • @Organis Well, then one just needs to iterate against an array of those targets.
            – Vesper
            Nov 11 at 12:04










          • Thanks a lot, I am going to try to finish the code.
            – Jane
            Nov 11 at 16:37















          up vote
          2
          down vote



          accepted










          You should somehow make your draggable objects know their targets, thus when your SWF registers an end drag event, the object that was being dragged would check against its target and if not colliding, then float/jump back. Since your objects derive from MovieClips, it's possible to add custom properties to them without doing any declarations, but be sure to check if there is something in a custom property before using it. Let's say you have assigned each draggable object a desiredTarget as whatever target you need them to be dragged. Then, you can do like this:



          function dropIt(e:MouseEvent):void {
          var desiredTarget:MovieClip=e.target.desiredTarget as MovieClip; // get where this should be placed
          e.target.stopDrag(); // we still need to release the dragged object
          if (!desiredTarget) return; // no target - nothing to do (also helps with debug)
          if (e.target.hitTestObject(desiredTarget)) {
          e.target.buttonMode=false;
          e.target.x=desiredTarget.x;
          e.target.y=desiredTarget.y;
          } else {
          // move dragged object back to starting position
          e.target.x=e.target.startX;
          e.target.y=e.target.startY;
          }
          }





          share|improve this answer





















          • OP explicitly stated that each object can have multiple targets. Add addDesired method that allows to form desired lists for each object and iterate through appropriate list inside dropIt method.
            – Organis
            Nov 11 at 7:55










          • @Organis Well, then one just needs to iterate against an array of those targets.
            – Vesper
            Nov 11 at 12:04










          • Thanks a lot, I am going to try to finish the code.
            – Jane
            Nov 11 at 16:37













          up vote
          2
          down vote



          accepted







          up vote
          2
          down vote



          accepted






          You should somehow make your draggable objects know their targets, thus when your SWF registers an end drag event, the object that was being dragged would check against its target and if not colliding, then float/jump back. Since your objects derive from MovieClips, it's possible to add custom properties to them without doing any declarations, but be sure to check if there is something in a custom property before using it. Let's say you have assigned each draggable object a desiredTarget as whatever target you need them to be dragged. Then, you can do like this:



          function dropIt(e:MouseEvent):void {
          var desiredTarget:MovieClip=e.target.desiredTarget as MovieClip; // get where this should be placed
          e.target.stopDrag(); // we still need to release the dragged object
          if (!desiredTarget) return; // no target - nothing to do (also helps with debug)
          if (e.target.hitTestObject(desiredTarget)) {
          e.target.buttonMode=false;
          e.target.x=desiredTarget.x;
          e.target.y=desiredTarget.y;
          } else {
          // move dragged object back to starting position
          e.target.x=e.target.startX;
          e.target.y=e.target.startY;
          }
          }





          share|improve this answer












          You should somehow make your draggable objects know their targets, thus when your SWF registers an end drag event, the object that was being dragged would check against its target and if not colliding, then float/jump back. Since your objects derive from MovieClips, it's possible to add custom properties to them without doing any declarations, but be sure to check if there is something in a custom property before using it. Let's say you have assigned each draggable object a desiredTarget as whatever target you need them to be dragged. Then, you can do like this:



          function dropIt(e:MouseEvent):void {
          var desiredTarget:MovieClip=e.target.desiredTarget as MovieClip; // get where this should be placed
          e.target.stopDrag(); // we still need to release the dragged object
          if (!desiredTarget) return; // no target - nothing to do (also helps with debug)
          if (e.target.hitTestObject(desiredTarget)) {
          e.target.buttonMode=false;
          e.target.x=desiredTarget.x;
          e.target.y=desiredTarget.y;
          } else {
          // move dragged object back to starting position
          e.target.x=e.target.startX;
          e.target.y=e.target.startY;
          }
          }






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 11 at 6:33









          Vesper

          16.6k42749




          16.6k42749












          • OP explicitly stated that each object can have multiple targets. Add addDesired method that allows to form desired lists for each object and iterate through appropriate list inside dropIt method.
            – Organis
            Nov 11 at 7:55










          • @Organis Well, then one just needs to iterate against an array of those targets.
            – Vesper
            Nov 11 at 12:04










          • Thanks a lot, I am going to try to finish the code.
            – Jane
            Nov 11 at 16:37


















          • OP explicitly stated that each object can have multiple targets. Add addDesired method that allows to form desired lists for each object and iterate through appropriate list inside dropIt method.
            – Organis
            Nov 11 at 7:55










          • @Organis Well, then one just needs to iterate against an array of those targets.
            – Vesper
            Nov 11 at 12:04










          • Thanks a lot, I am going to try to finish the code.
            – Jane
            Nov 11 at 16:37
















          OP explicitly stated that each object can have multiple targets. Add addDesired method that allows to form desired lists for each object and iterate through appropriate list inside dropIt method.
          – Organis
          Nov 11 at 7:55




          OP explicitly stated that each object can have multiple targets. Add addDesired method that allows to form desired lists for each object and iterate through appropriate list inside dropIt method.
          – Organis
          Nov 11 at 7:55












          @Organis Well, then one just needs to iterate against an array of those targets.
          – Vesper
          Nov 11 at 12:04




          @Organis Well, then one just needs to iterate against an array of those targets.
          – Vesper
          Nov 11 at 12:04












          Thanks a lot, I am going to try to finish the code.
          – Jane
          Nov 11 at 16:37




          Thanks a lot, I am going to try to finish the code.
          – Jane
          Nov 11 at 16:37












          up vote
          1
          down vote













          Despite the fact Vesper's answer is already accepted, I think it to be far too brief and insufficient, on top of that it doesn't actually answer how to design a system where any number of objects could be dropped to any number of targets, without substantial changes to the code.



          // Unlike the Object class, that allows String keys only
          // the Dictionary class allows you to store and
          // access data by the object instance.
          var theValids:Dictionary = new Dictionary;

          // We'll store the original (x,y) coordinates here.
          var theOrigin:Point = new Point;

          // The Sprite class is the superclass of MovieClip, furthermore,
          // the startDrag method defined for Sprite class, so unless you
          // create your own dragging code, you are bound to use Sprites,
          // while you cannot drag SimpleButtons and TextFields this way.
          // We'll store the current dragged object here.
          var theObject:Sprite;

          // This first argument is the object you want to be draggable.
          // The "...targets:Array" means you can call this method with
          // any number of arguments, the first one is mandatory, the
          // rest will be passed in a form of Array (empty Array if you
          // call this method with a single argument).
          function setupDraggable(source:Sprite, ...targets:Array):void
          {
          // Make the object draggable.
          source.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
          source.mouseChildren = false;
          source.mouseEnabled = true;
          source.buttonMode = true;

          // Keep the list of the object's targets so it can be
          // retrieved later by the key of the object itself.
          theValids[source] = targets;
          }

          // Ok, let's setup the objects and link them to their designated
          // targets. The whole point of the rest of the code is to make
          // this one part as simple as it possible: you just edit
          // these lines to tell which one objects go where.

          // This object can be dropped to a single target.
          setupDraggable(obj_1 , target1);

          // These objects can go to two targets each.
          setupDraggable(obj_10, target1, target10);
          setupDraggable(obj_2 , target2, target20);

          // This one object can be dropped to any of targets.
          setupDraggable(obj_20, target1, target10, target2, target20);

          // The MOUSE_DOWN event handler.
          function onDown(e:MouseEvent):void
          {
          // Get the reference to the object under the mouse.
          theObject = e.currentTarget as Sprite;

          // Keep the object's initial position.
          theOrigin.x = theObject.x;
          theOrigin.y = theObject.y;

          // Put the dragged object on top of anything else.
          // We are operating in the parent context of all these
          // objects here so there's no need to address anObj.parent.
          setChildIndex(theObject, numChildren - 1);

          // Start dragging.
          theObject.startDrag(true);

          // Listen to the MOUSE_UP event, which could happen offstage
          // and out of the dragged object, so the only reliable
          // way is to listen it from the Stage. That's why we
          // are keeping theObject reference as an additional
          // variable, without relying on event's data.
          stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
          }

          // The MOUSE_UP event handler.
          function onUp(e:MouseEvent):void
          {
          // Unsubscribe the MOUSE_UP event handler.
          stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);

          // Stop the dragging process.
          theObject.stopDrag();

          // Let's assume there could be more than a single collision.
          // We need to figure the one target that is closest.
          var theTarget:DisplayObject;
          var theDistance:int = 100000;

          // Store the dragged object position so we can
          // measure distances to the valid collisions, if any.
          var thePlace:Point = theObject.localToGlobal(new Point);

          // Now, the magic. Lets browse through the
          // valid targets and see if there's a collision.
          for each (var aTarget:DisplayObject in theValids[theObject])
          {
          if (theObject.hitTestObject(aTarget))
          {
          // Let's see if the current collision is closer
          // to the dragged object, than the previous one
          // (if any, that's what initial 100000 for).
          var aPlace:Point = aTarget.localToGlobal(new Point);
          var aDistance:int = Point.distance(aPlace, thePlace);

          if (aDistance < theDistance)
          {
          theTarget = aTarget;
          theDistance = aDistance;
          }
          }
          }

          // If there's at least one collision,
          // this variable will not be empty.
          if (theTarget)
          {
          // Make the object non-interactive.
          theObject.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
          theObject.mouseEnabled = false;
          theObject.buttonMode = false;

          // Glue the dragged object to the center of the target.
          theObject.x = theTarget.x;
          theObject.y = theTarget.y;
          }
          else
          {
          // If we're here, that means there was no valid collisions,
          // lets return the object to its designated place.
          theObject.x = theOrigin.x;
          theObject.y = theOrigin.y;
          }

          // Clean-up. Remove the reference, the object is no longer
          // being dragged, so you won't need to keep it.
          theObject = null;
          }


          P.S. I didn't test it, but I think I put enough comments to explain the whole idea.






          share|improve this answer























          • Thanks a lot Organis, I am tying to figure it out. I am struggling to work with whole code. However, your comment is really helpful for me. Thanks.
            – Jane
            Nov 11 at 16:36















          up vote
          1
          down vote













          Despite the fact Vesper's answer is already accepted, I think it to be far too brief and insufficient, on top of that it doesn't actually answer how to design a system where any number of objects could be dropped to any number of targets, without substantial changes to the code.



          // Unlike the Object class, that allows String keys only
          // the Dictionary class allows you to store and
          // access data by the object instance.
          var theValids:Dictionary = new Dictionary;

          // We'll store the original (x,y) coordinates here.
          var theOrigin:Point = new Point;

          // The Sprite class is the superclass of MovieClip, furthermore,
          // the startDrag method defined for Sprite class, so unless you
          // create your own dragging code, you are bound to use Sprites,
          // while you cannot drag SimpleButtons and TextFields this way.
          // We'll store the current dragged object here.
          var theObject:Sprite;

          // This first argument is the object you want to be draggable.
          // The "...targets:Array" means you can call this method with
          // any number of arguments, the first one is mandatory, the
          // rest will be passed in a form of Array (empty Array if you
          // call this method with a single argument).
          function setupDraggable(source:Sprite, ...targets:Array):void
          {
          // Make the object draggable.
          source.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
          source.mouseChildren = false;
          source.mouseEnabled = true;
          source.buttonMode = true;

          // Keep the list of the object's targets so it can be
          // retrieved later by the key of the object itself.
          theValids[source] = targets;
          }

          // Ok, let's setup the objects and link them to their designated
          // targets. The whole point of the rest of the code is to make
          // this one part as simple as it possible: you just edit
          // these lines to tell which one objects go where.

          // This object can be dropped to a single target.
          setupDraggable(obj_1 , target1);

          // These objects can go to two targets each.
          setupDraggable(obj_10, target1, target10);
          setupDraggable(obj_2 , target2, target20);

          // This one object can be dropped to any of targets.
          setupDraggable(obj_20, target1, target10, target2, target20);

          // The MOUSE_DOWN event handler.
          function onDown(e:MouseEvent):void
          {
          // Get the reference to the object under the mouse.
          theObject = e.currentTarget as Sprite;

          // Keep the object's initial position.
          theOrigin.x = theObject.x;
          theOrigin.y = theObject.y;

          // Put the dragged object on top of anything else.
          // We are operating in the parent context of all these
          // objects here so there's no need to address anObj.parent.
          setChildIndex(theObject, numChildren - 1);

          // Start dragging.
          theObject.startDrag(true);

          // Listen to the MOUSE_UP event, which could happen offstage
          // and out of the dragged object, so the only reliable
          // way is to listen it from the Stage. That's why we
          // are keeping theObject reference as an additional
          // variable, without relying on event's data.
          stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
          }

          // The MOUSE_UP event handler.
          function onUp(e:MouseEvent):void
          {
          // Unsubscribe the MOUSE_UP event handler.
          stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);

          // Stop the dragging process.
          theObject.stopDrag();

          // Let's assume there could be more than a single collision.
          // We need to figure the one target that is closest.
          var theTarget:DisplayObject;
          var theDistance:int = 100000;

          // Store the dragged object position so we can
          // measure distances to the valid collisions, if any.
          var thePlace:Point = theObject.localToGlobal(new Point);

          // Now, the magic. Lets browse through the
          // valid targets and see if there's a collision.
          for each (var aTarget:DisplayObject in theValids[theObject])
          {
          if (theObject.hitTestObject(aTarget))
          {
          // Let's see if the current collision is closer
          // to the dragged object, than the previous one
          // (if any, that's what initial 100000 for).
          var aPlace:Point = aTarget.localToGlobal(new Point);
          var aDistance:int = Point.distance(aPlace, thePlace);

          if (aDistance < theDistance)
          {
          theTarget = aTarget;
          theDistance = aDistance;
          }
          }
          }

          // If there's at least one collision,
          // this variable will not be empty.
          if (theTarget)
          {
          // Make the object non-interactive.
          theObject.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
          theObject.mouseEnabled = false;
          theObject.buttonMode = false;

          // Glue the dragged object to the center of the target.
          theObject.x = theTarget.x;
          theObject.y = theTarget.y;
          }
          else
          {
          // If we're here, that means there was no valid collisions,
          // lets return the object to its designated place.
          theObject.x = theOrigin.x;
          theObject.y = theOrigin.y;
          }

          // Clean-up. Remove the reference, the object is no longer
          // being dragged, so you won't need to keep it.
          theObject = null;
          }


          P.S. I didn't test it, but I think I put enough comments to explain the whole idea.






          share|improve this answer























          • Thanks a lot Organis, I am tying to figure it out. I am struggling to work with whole code. However, your comment is really helpful for me. Thanks.
            – Jane
            Nov 11 at 16:36













          up vote
          1
          down vote










          up vote
          1
          down vote









          Despite the fact Vesper's answer is already accepted, I think it to be far too brief and insufficient, on top of that it doesn't actually answer how to design a system where any number of objects could be dropped to any number of targets, without substantial changes to the code.



          // Unlike the Object class, that allows String keys only
          // the Dictionary class allows you to store and
          // access data by the object instance.
          var theValids:Dictionary = new Dictionary;

          // We'll store the original (x,y) coordinates here.
          var theOrigin:Point = new Point;

          // The Sprite class is the superclass of MovieClip, furthermore,
          // the startDrag method defined for Sprite class, so unless you
          // create your own dragging code, you are bound to use Sprites,
          // while you cannot drag SimpleButtons and TextFields this way.
          // We'll store the current dragged object here.
          var theObject:Sprite;

          // This first argument is the object you want to be draggable.
          // The "...targets:Array" means you can call this method with
          // any number of arguments, the first one is mandatory, the
          // rest will be passed in a form of Array (empty Array if you
          // call this method with a single argument).
          function setupDraggable(source:Sprite, ...targets:Array):void
          {
          // Make the object draggable.
          source.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
          source.mouseChildren = false;
          source.mouseEnabled = true;
          source.buttonMode = true;

          // Keep the list of the object's targets so it can be
          // retrieved later by the key of the object itself.
          theValids[source] = targets;
          }

          // Ok, let's setup the objects and link them to their designated
          // targets. The whole point of the rest of the code is to make
          // this one part as simple as it possible: you just edit
          // these lines to tell which one objects go where.

          // This object can be dropped to a single target.
          setupDraggable(obj_1 , target1);

          // These objects can go to two targets each.
          setupDraggable(obj_10, target1, target10);
          setupDraggable(obj_2 , target2, target20);

          // This one object can be dropped to any of targets.
          setupDraggable(obj_20, target1, target10, target2, target20);

          // The MOUSE_DOWN event handler.
          function onDown(e:MouseEvent):void
          {
          // Get the reference to the object under the mouse.
          theObject = e.currentTarget as Sprite;

          // Keep the object's initial position.
          theOrigin.x = theObject.x;
          theOrigin.y = theObject.y;

          // Put the dragged object on top of anything else.
          // We are operating in the parent context of all these
          // objects here so there's no need to address anObj.parent.
          setChildIndex(theObject, numChildren - 1);

          // Start dragging.
          theObject.startDrag(true);

          // Listen to the MOUSE_UP event, which could happen offstage
          // and out of the dragged object, so the only reliable
          // way is to listen it from the Stage. That's why we
          // are keeping theObject reference as an additional
          // variable, without relying on event's data.
          stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
          }

          // The MOUSE_UP event handler.
          function onUp(e:MouseEvent):void
          {
          // Unsubscribe the MOUSE_UP event handler.
          stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);

          // Stop the dragging process.
          theObject.stopDrag();

          // Let's assume there could be more than a single collision.
          // We need to figure the one target that is closest.
          var theTarget:DisplayObject;
          var theDistance:int = 100000;

          // Store the dragged object position so we can
          // measure distances to the valid collisions, if any.
          var thePlace:Point = theObject.localToGlobal(new Point);

          // Now, the magic. Lets browse through the
          // valid targets and see if there's a collision.
          for each (var aTarget:DisplayObject in theValids[theObject])
          {
          if (theObject.hitTestObject(aTarget))
          {
          // Let's see if the current collision is closer
          // to the dragged object, than the previous one
          // (if any, that's what initial 100000 for).
          var aPlace:Point = aTarget.localToGlobal(new Point);
          var aDistance:int = Point.distance(aPlace, thePlace);

          if (aDistance < theDistance)
          {
          theTarget = aTarget;
          theDistance = aDistance;
          }
          }
          }

          // If there's at least one collision,
          // this variable will not be empty.
          if (theTarget)
          {
          // Make the object non-interactive.
          theObject.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
          theObject.mouseEnabled = false;
          theObject.buttonMode = false;

          // Glue the dragged object to the center of the target.
          theObject.x = theTarget.x;
          theObject.y = theTarget.y;
          }
          else
          {
          // If we're here, that means there was no valid collisions,
          // lets return the object to its designated place.
          theObject.x = theOrigin.x;
          theObject.y = theOrigin.y;
          }

          // Clean-up. Remove the reference, the object is no longer
          // being dragged, so you won't need to keep it.
          theObject = null;
          }


          P.S. I didn't test it, but I think I put enough comments to explain the whole idea.






          share|improve this answer














          Despite the fact Vesper's answer is already accepted, I think it to be far too brief and insufficient, on top of that it doesn't actually answer how to design a system where any number of objects could be dropped to any number of targets, without substantial changes to the code.



          // Unlike the Object class, that allows String keys only
          // the Dictionary class allows you to store and
          // access data by the object instance.
          var theValids:Dictionary = new Dictionary;

          // We'll store the original (x,y) coordinates here.
          var theOrigin:Point = new Point;

          // The Sprite class is the superclass of MovieClip, furthermore,
          // the startDrag method defined for Sprite class, so unless you
          // create your own dragging code, you are bound to use Sprites,
          // while you cannot drag SimpleButtons and TextFields this way.
          // We'll store the current dragged object here.
          var theObject:Sprite;

          // This first argument is the object you want to be draggable.
          // The "...targets:Array" means you can call this method with
          // any number of arguments, the first one is mandatory, the
          // rest will be passed in a form of Array (empty Array if you
          // call this method with a single argument).
          function setupDraggable(source:Sprite, ...targets:Array):void
          {
          // Make the object draggable.
          source.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
          source.mouseChildren = false;
          source.mouseEnabled = true;
          source.buttonMode = true;

          // Keep the list of the object's targets so it can be
          // retrieved later by the key of the object itself.
          theValids[source] = targets;
          }

          // Ok, let's setup the objects and link them to their designated
          // targets. The whole point of the rest of the code is to make
          // this one part as simple as it possible: you just edit
          // these lines to tell which one objects go where.

          // This object can be dropped to a single target.
          setupDraggable(obj_1 , target1);

          // These objects can go to two targets each.
          setupDraggable(obj_10, target1, target10);
          setupDraggable(obj_2 , target2, target20);

          // This one object can be dropped to any of targets.
          setupDraggable(obj_20, target1, target10, target2, target20);

          // The MOUSE_DOWN event handler.
          function onDown(e:MouseEvent):void
          {
          // Get the reference to the object under the mouse.
          theObject = e.currentTarget as Sprite;

          // Keep the object's initial position.
          theOrigin.x = theObject.x;
          theOrigin.y = theObject.y;

          // Put the dragged object on top of anything else.
          // We are operating in the parent context of all these
          // objects here so there's no need to address anObj.parent.
          setChildIndex(theObject, numChildren - 1);

          // Start dragging.
          theObject.startDrag(true);

          // Listen to the MOUSE_UP event, which could happen offstage
          // and out of the dragged object, so the only reliable
          // way is to listen it from the Stage. That's why we
          // are keeping theObject reference as an additional
          // variable, without relying on event's data.
          stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
          }

          // The MOUSE_UP event handler.
          function onUp(e:MouseEvent):void
          {
          // Unsubscribe the MOUSE_UP event handler.
          stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);

          // Stop the dragging process.
          theObject.stopDrag();

          // Let's assume there could be more than a single collision.
          // We need to figure the one target that is closest.
          var theTarget:DisplayObject;
          var theDistance:int = 100000;

          // Store the dragged object position so we can
          // measure distances to the valid collisions, if any.
          var thePlace:Point = theObject.localToGlobal(new Point);

          // Now, the magic. Lets browse through the
          // valid targets and see if there's a collision.
          for each (var aTarget:DisplayObject in theValids[theObject])
          {
          if (theObject.hitTestObject(aTarget))
          {
          // Let's see if the current collision is closer
          // to the dragged object, than the previous one
          // (if any, that's what initial 100000 for).
          var aPlace:Point = aTarget.localToGlobal(new Point);
          var aDistance:int = Point.distance(aPlace, thePlace);

          if (aDistance < theDistance)
          {
          theTarget = aTarget;
          theDistance = aDistance;
          }
          }
          }

          // If there's at least one collision,
          // this variable will not be empty.
          if (theTarget)
          {
          // Make the object non-interactive.
          theObject.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
          theObject.mouseEnabled = false;
          theObject.buttonMode = false;

          // Glue the dragged object to the center of the target.
          theObject.x = theTarget.x;
          theObject.y = theTarget.y;
          }
          else
          {
          // If we're here, that means there was no valid collisions,
          // lets return the object to its designated place.
          theObject.x = theOrigin.x;
          theObject.y = theOrigin.y;
          }

          // Clean-up. Remove the reference, the object is no longer
          // being dragged, so you won't need to keep it.
          theObject = null;
          }


          P.S. I didn't test it, but I think I put enough comments to explain the whole idea.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 11 at 16:56

























          answered Nov 11 at 14:57









          Organis

          4,9762610




          4,9762610












          • Thanks a lot Organis, I am tying to figure it out. I am struggling to work with whole code. However, your comment is really helpful for me. Thanks.
            – Jane
            Nov 11 at 16:36


















          • Thanks a lot Organis, I am tying to figure it out. I am struggling to work with whole code. However, your comment is really helpful for me. Thanks.
            – Jane
            Nov 11 at 16:36
















          Thanks a lot Organis, I am tying to figure it out. I am struggling to work with whole code. However, your comment is really helpful for me. Thanks.
          – Jane
          Nov 11 at 16:36




          Thanks a lot Organis, I am tying to figure it out. I am struggling to work with whole code. However, your comment is really helpful for me. Thanks.
          – Jane
          Nov 11 at 16:36


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246001%2fflash-as3-drag-and-drop-multiple-objects-to-multiple-targets%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Xamarin.iOS Cant Deploy on Iphone

          Glorious Revolution

          Dulmage-Mendelsohn matrix decomposition in Python