How to swap the position of two objects?

Question

I have four self made componensts that I imported them into my main mxml file
and placed each on four corners.
What I want to achieve is to drag each component onto others then swap their position.
For example, comp A is dragged over comp B, when this is detected, swap the position of A and B.
But at the moment it doesn't seem to work properly. I could not figure out what's wrong with my code. Could any one help me achieve that?
Many thanks to any who could give me a hand!
*********This is one of my component***********
*********All other three components are made the same way, except each source of image file is different******************
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="42" height="42">
    <mx:Image source="Images/air.png"/>
</mx:Box>
*********This is my mxml that calls my components***********
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:comp="Comp.*" creationComplete = "onInit()">
    <mx:Script>
        <![CDATA[
            import mx.containers.Box;
            import Comp.Icon_illustrator;
            import Comp.Icon_air;
            import Comp.Icon_flash;
            import Comp.Icon_flex;
            private var i_1:Icon_air; //1
            private var i_2:Icon_flash; //2
            private var i_3:Icon_flex; //3
            private var i_4:Icon_illustrator; //4
            private var origX:Number;
            private var origY:Number;
            private var startObj:String;
            private var icons:Array;
            private var h_1:Box;
            private var h_2:Box;
            private var h_3:Box;
            private var h_4:Box;
            private function onInit():void{
                //initialise all icons
                i_1 = new Icon_air();
                i_2 = new Icon_flash();
                i_3 = new Icon_flex();
                i_4 = new Icon_illustrator();
                i_1.name = "i_1";
                i_2.name = "i_2";
                i_3.name = "i_3";
                i_4.name = "i_4";
                //populate icon
                showArea.addChild(i_1);
                showArea.addChild(i_2);
                showArea.addChild(i_3);
                showArea.addChild(i_4);
                //set x position
                i_1.x = 100;
                i_2.x = 200;
                i_3.x = 100;
                i_4.x = 0;
                //set y position
                i_1.y = 0;
                i_2.y = 100;
                i_3.y = 200;
                i_4.y = 100;
                icons = [i_1, i_2, i_3, i_4];
                //addEventListeners
                for(var i:int=0; i<icons.length; i++){
                    icons[i].addEventListener(MouseEvent.MOUSE_DOWN, moveMe);
                    icons[i].addEventListener(MouseEvent.MOUSE_UP, stopDragMe);
            }//end of onInit
            private function moveMe(e:MouseEvent):void{
                e.currentTarget.startDrag();   
                showArea.setChildIndex(DisplayObject(e.currentTarget), 0);
                origX = e.currentTarget.x;
                origY = e.currentTarget.y;
                startObj = e.currentTarget.name;   
            private function stopDragMe(e:MouseEvent):void{
                if(this[startObj].hitTestObject(icons[1])){
                    trace("hit 2");
                    this[startObj].x = i_2.x;
                    this[startObj].y = i_2.y;
                    i_2.x = origX;
                    i_2.y = origY;
                }else if(this[startObj].hitTestObject(icons[0])){
                    trace("hit 1");
                    this[startObj].x = i_1.x;
                    this[startObj].y = i_1.y;
                    i_1.x = origX;
                    i_1.y = origY;
                }else{
                    trace("hit others");
                    this[startObj].x = origX;
                    this[startObj].y = origY;
                e.currentTarget.stopDrag();
            }//end of stopDragMe
        ]]>
    </mx:Script>
    <mx:Panel id="showArea" width="400" height="300" layout="absolute" backgroundColor="0x999999"/>
</mx:WindowedApplication>

Answer 1

Here is a sample of swaping two objects in Flex (not Air)   I believe it is the same.  Take a look at the way the x and y coords are swapped using the dragInitator and the currentTarget object in the dragDropHandler.
Hope this helps
<?xml version="1.0" encoding="utf-8"?><mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
 <mx:Script>
<![CDATA[
 import mx.containers.Box; 
import mx.core.UIComponent; 
import mx.managers.DragManager; 
import mx.core.DragSource; 
import mx.events.DragEvent; 
private var dragProxy:Box= new Box(); 
public function dragDropHandler(e:DragEvent): void { 
//These variables are the x and y coords of the objects 
//the e.dragInitator is the object being dragged 
//the e.currentTarget is the object being dropped on 
//First save the x and y coords of each of the objects 
var xdi:int = e.dragInitiator.x; 
var ydi:int = e.dragInitiator.y; 
var xct:int = e.currentTarget.x; 
var yct:int = e.currentTarget.y; 
//now switch them around.e.dragInitiator.x = xct;
e.dragInitiator.y = yct;
e.currentTarget.x = xdi;
e.currentTarget.y = ydi;
public function dragEnterHandler(event:DragEvent):void { 
DragManager.acceptDragDrop(UIComponent(event.target));
public function mouseMoveHandler(event:MouseEvent):void { 
if(event.buttonDown == false) return; 
var dragInitiator:UIComponent = event.target as UIComponent; 
var dragSource:DragSource = new DragSource(); 
dragProxy =
new Box();dragProxy.width = dragInitiator.width;
dragProxy.height = dragInitiator.height;
dragProxy.setStyle(
"borderStyle","solid")dragProxy.setStyle(
"borderColor","0x000000")dragProxy.setStyle(
"backgroundColor","0xc6c6c6"); 
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy,
event.localX * -1, event.localY * -1, 1.00);
]]>
</mx:Script>
 <mx:Canvas width="84" height="93" x="23" y="14" borderStyle="
solid" borderColor="
#030303" backgroundColor="
#F83C3C"dragEnter="dragEnterHandler(event)"
dragDrop="dragDropHandler(event)"
mouseMove="mouseMoveHandler(event)"
>
 </mx:Canvas>
 <mx:Canvas width="84" height="93" x="223" y="14" borderStyle="
solid" borderColor="
#030303" backgroundColor="
#C5F83C"dragEnter="dragEnterHandler(event)"
dragDrop="dragDropHandler(event)"
mouseMove="mouseMoveHandler(event)"
>
 </mx:Canvas>
 </mx:Application>