Flash AS3 - Drag and Drop multiple objects to one target?

Question

Title is more or less self-explanatory, I’ve been working through many different tutorials and I’m not exactly too good with AS3 to be perfectly honest. (Image above shows what I'm aiming for)

Anyway, what I notice in most of the online tutorials I see, the drag and drop tutorials are either based on one object to one target or multiple objects to multiple targets, so I was wondering if someone is kind enough to help me and explaining how I can get multiple objects to connect to one target.

And, if possible making it switchable, as in for example, if object 1 is already in place on the target when I drag object 2 over, then object 1 returns to its original position and object two takes its place.

A easier way to explain this is to say that I'm trying to create a game where there are three statues and the user can pick one of the three to place in a set target zone.

I apologies if what I say doesn't make much sense, will clear up anything if that causes confusion. Here's the AS3 code I'm using at the moment.

var startX:int;
var startY:int;

circle1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
circle1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
circle2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
circle2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
circle3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
circle3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

function pickUp(event:MouseEvent):void {
    startX = event.target.x;
    startY = event.target.y;
    event.target.startDrag(true);
    event.target.parent.addChild(event.target);

}

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

    var theTargetName:String = "target" + event.target.name;
    var theTarget:DisplayObject = getChildByName(theTargetName);
    if (event.target.dropTarget != null && event.target.dropTarget.parent == theTarget){    
        event.target.buttonMode = false;
        event.target.x = theTarget.x;
        event.target.y = theTarget.y;
    }

else{

    event.target.x = startX;
    event.target.y = startY;

circle1_mc.buttonMode = true;
circle2_mc.buttonMode = true;
circle3_mc.buttonMode = true;

Answer 1

Instead of checking the dropTarget, you can use hitTestObject to see if the dropped object is "touching" theTarget. Otherwise, any other item that has already been dropped onto theTarget may be reported as the dropTarget. Also, since MovieClip is dynamic, you can store the startX and startY values in each instance.

The following modified code will use a single target_mc as a drop target. When one item is dropped on it, any other items will be moved back to their original spot:

// create an array as @David suggested to keep track of your draggable items
var circles:Array = [circle1_mc, circle2_mc, circle3_mc];
for each(var circleMC:MovieClip in circles)
{
    circleMC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    circleMC.addEventListener(MouseEvent.MOUSE_UP, dropIt);
    circleMC.startX = circleMC.x;
    circleMC.startY = circleMC.y;
}

function pickUp(event:MouseEvent):void
{
    // no longer need to keep track of startX & startY here because that's already been done up above
    event.target.startDrag(true);
    event.target.parent.addChild(event.target);

}

function dropIt(event:MouseEvent):void
{
    event.target.stopDrag();
    // check to see if the event target is touching target_mc using hitTestObject
    if(event.target.hitTestObject(target_mc)){
        event.target.buttonMode = false;
        event.target.x = target_mc.x;
        event.target.y = target_mc.y;
        // move all circles OTHER than the current target back to their original positions
        for each(var circleMC:MovieClip in circles)
        {
            if(event.target != circleMC)
            {
                circleMC.x = circleMC.startX;
                circleMC.y = circleMC.startY;
            }
        }
    }
    else
    {
        // only need to move the event target back if it was dropped outside of target_mc
        event.target.x = event.target.startX;
        event.target.y = event.target.startY;
        event.target.buttonMode = true;
    }
}