How I can align movie clip to another movie clip for drag drop in as3

Question

I'm an amatuer in As3. I need to complete my first project in drag drop game using an As3. The problem is I did not get a match coding to align the draggable movie clips to another movie clip. I want to make a complete train with dragging the body of the train to its head by following the order of the complete train example given. I have three movie clips of train body and a movie clip of train head. What I want to do is dragging the train body to its head by following the arrangement of the example complete train given with using drag drop play style. If the correct body train is drag to its head, then it will align and another train body is appear and will repeat the same way until its complete.

Anyone know how to do this? please, any help would be really nice.
Thanks

So here is my code :

    stop();

    import flash.display.MovieClip;

    var orig1X:Number=body_mc.x;  
    var orig1Y:Number=body_mc.y;
    var orig2X:Number=body1_mc.x;
    var orig2Y:Number=body1_mc.y;
    var orig3X:Number=body2_mc.x;
    var orig3Y:Number=body2_mc.y; 


    body_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);
    body_mc.addEventListener(MouseEvent.MOUSE_UP, bodyRelease);
    body1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);   
    body1_mc.addEventListener(MouseEvent.MOUSE_UP, body1Release);   
    body2_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);    
    body2_mc.addEventListener(MouseEvent.MOUSE_UP, body2Release); 

    function dragTheObject(event:MouseEvent):void { 

        var item:MovieClip=MovieClip(event.target); 
        addChild(item);
        item.startDrag(); 
        var topPos:uint=this.numChildren-1; 
        this.setChildIndex(item, topPos);

    }  

    function bodyRelease(event:MouseEvent):void { 
        var item:MovieClip=MovieClip(event.target); 
        item.stopDrag();    
    if (head_mc.hitTestPoint(item.x,item.y)) { 
            item.x=head_mc.x; 
            item.y=head_mc.y; 
        }
        else { 
          item.x=orig1X; 
           item.y=orig1Y; 
        } 
    };    

    function body1Release(event:MouseEvent):void { 
        var item:MovieClip=MovieClip(event.target); 
        item.stopDrag();    
    if (head_mc.hitTestPoint(item.x,item.y)) { 
            item.x=head_mc.x; 
            item.y=head_mc.y; 
        }
        else { 
           item.x=orig2X; 
           item.y=orig2Y; 
        } 
    };  

    function body2Release(event:MouseEvent):void { 
        var item:MovieClip=MovieClip(event.target); 
        item.stopDrag();    
    if (head_mc.hitTestPoint(item.x,item.y)) { 
            item.x=head_mc.x; 
            item.y=head_mc.y; 
        }
        else { 
           item.x=orig3X; 
           item.y=orig3Y; 
        } 
    };  

Answer 1

I am a little confused as to what you want but if I understand you correctly then you have the front/head of the train on screen and 3 pieces of this train, you have to drag these pieces to the head of the train and if they touch the head when you let go they will be aligned with the last piece you added??? if that is what you're trying to do give this a try as your base class.

package {

/**
 * ...
 * @author Steven Davies
 */
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;

public class TrainDragAndDrop extends MovieClip
{
    private var origins:Vector.<Point> = new Vector.<Point>;

    private var trains:Array = new Array();
    private var numberOfTrains:int = 3;
    private var trainOrder:Array = new Array();

    private var movingTrainIndex:int = 0;
    private var mouseOffSet:Point = new Point();

    private var draggingTrain:Boolean = false;

    public var head_mc:MovieClip;

    public function TrainDragAndDrop():void
    {
        addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
    }

    public function addedToStageHandler(e:Event):void 
    {
        removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);

        //should really add the trains dynamically but this will work.
        for (var i:int = 0; i < numberOfTrains; i++)
        {
            if (this["body" + i + "_mc"] != null)
            {
                trains[i] = this["body" + i + "_mc"];
                origins[i] = new Point(trains[i].x, trains[i].y);
            }
            else
            {
                break;
            }
        }

        addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    }

    private function mouseDownHandler(e:MouseEvent):void 
    {
        for (var i:int = 0; i < trains.length; i++)
        {
            if (trains[i].hitTestPoint(mouseX, mouseY))
            {
                movingTrainIndex = i;
                mouseOffSet.x = trains[i].x - mouseX;
                mouseOffSet.y = trains[i].y - mouseY;
                draggingTrain = true;

                break;
            }
        }

        if (draggingTrain == true)
        {
            removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        }
    }

    private function mouseUpHandler(e:MouseEvent):void
    {
        draggingTrain = false;
        removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
        removeEventListener(Event.ENTER_FRAME, enterFrameHandler);

        if (head_mc.hitTestPoint(mouseX, mouseY, true))
        {
            if (trainOrder.length == 0)
            {
                trains[movingTrainIndex].x = head_mc.x;
                trains[movingTrainIndex].y = head_mc.y;
            }
            else
            {
                trains[movingTrainIndex].x = trains[trainOrder[trainOrder.length - 1]].x;
                trains[movingTrainIndex].y = trains[trainOrder[trainOrder.length - 1]].y + trains[trainOrder[trainOrder.length - 1]].height;
            }
            trainOrder.push(movingTrainIndex);
        }
        else
        {
            trains[movingTrainIndex].x = origins[movingTrainIndex].x;
            trains[movingTrainIndex].y = origins[movingTrainIndex].y;
        }
        addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    }

    private function enterFrameHandler(e:Event):void 
    {
        if (draggingTrain)
        {
            trains[movingTrainIndex].x = mouseX + mouseOffSet.x;
            trains[movingTrainIndex].y = mouseY + mouseOffSet.y;
        }
    }
}

}

I can't seem to add an fla to this so can't show you an example but for this to work make sure that you "body_mc" instance is named to "body0_mc" instead and the anchor point of the trains is at the top of the movie clip, if you would like me to send you an fla just private message me your email and I will send it to you.

If I am misunderstanding what you need to happen let me know and we can talk about what it is you need.