利用自定义事件使Flex可以同时拖动多个可视组件

原理：

1.init()事件中监听鼠标按下，调用onMouseDown()。

2.onMouseDown()事件中主要做3件事：

A)依次把所需要拖动的所有组件压入数组，计算容器内的第1个子组件坐标相对于当前鼠标坐标的偏移量offsetX[0]以及offsetY[0]，然后依次计算第i个子组件的坐标相对于第i-1个子组件的偏移量，其中i>0。

B)监听鼠标移动事件onMouseMove()

C)监听鼠标松开事件

3.onMouseMove()事件中实时检测当前鼠标移动的距离，并让容器内第1个子组件跟随鼠标移动，并且始终与鼠标相距之前算得的偏移量，之后第i个子组件根据与第i-1个子组件的相对距离依次移动，最关键的是需要调用updateAfterEvent()方法，不然移动会有延迟。

4.onMouseUp()事件取消事件onMouseMove()、onMouseUp()这2个事件的监听，达到释放目标的目的。

以下是源码，写的很差，大家看懂为先哈：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="1000" height="1000"
 horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Script>
        <![CDATA[        	
        	private var draggedObjects:Array=new Array();  
			private var offsetX:Array=new Array();
			private var offsetY:Array=new Array();
			
        	private function init():void
        	{
        		this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
        	}
			private function onMouseDown(evt:MouseEvent):void
			{
				for(var i:int=0;i<this.numChildren;i++)
				{
					draggedObjects.push(this.getChildAt(i));
					if(i==0)
					{
						offsetX[i]=evt.stageX-this.getChildAt(i).x;
						offsetY[i]=evt.stageY-this.getChildAt(i).y;
					}
					else
					{
						offsetX[i]=this.getChildAt(i-1).x-this.getChildAt(i).x;
						offsetY[i]=this.getChildAt(i-1).y-this.getChildAt(i).y;
					}
				}
				stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
				stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
			}
			
			private function onMouseMove(evt:MouseEvent):void
			{ 
				for(var i:int=0;i<this.numChildren;i++)
				{
					if(i==0)
					{
						draggedObjects[i].x=evt.stageX-offsetX[i];
						draggedObjects[i].y=evt.stageY-offsetY[i];
					}
					else
					{
						draggedObjects[i].x=draggedObjects[i-1].x-offsetX[i];
						draggedObjects[i].y=draggedObjects[i-1].y-offsetY[i];
					}
				}
				evt.updateAfterEvent();
			}
			
			private function onMouseUp(evt:MouseEvent):void
			{
				stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
				stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
				
			}
        ]]>
    </mx:Script>
        <mx:Canvas id="cvs1" name="cvs1" width="200" height="200" x="0" y="0" backgroundColor="red">
        </mx:Canvas>
         <mx:Canvas id="cvs2" name="cvs2" width="200" height="200" x="0" y="200" backgroundColor="yellow">
        </mx:Canvas>
         <mx:Canvas id="cvs3" name="cvs3" width="200" height="200" x="200" y="200" backgroundColor="blue">
        </mx:Canvas>
</mx:Application>

以下为20110930改进过的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="1000" height="1000"
 horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Script>
        <![CDATA[        	
        	private var draggedObjects:Array=new Array();  
			private var offsetX:Array=new Array();
			private var offsetY:Array=new Array();
			
        	private function init():void
        	{
        		this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
        	}
			private function onMouseDown(evt:MouseEvent):void
			{
				for(var i:int=0;i<this.displayObjectContainer.numChildren;i++)
				{
					draggedObjects.push(this.displayObjectContainer.getChildAt(i));
					if(i==0)
					{
						offsetX[i]=this.displayObjectContainer.mouseX-this.displayObjectContainer.getChildAt(i).x;
						offsetY[i]=this.displayObjectContainer.mouseY-this.displayObjectContainer.getChildAt(i).y;
					}
					else
					{
						offsetX[i]=this.displayObjectContainer.getChildAt(i-1).x-this.displayObjectContainer.getChildAt(i).x;
						offsetY[i]=this.displayObjectContainer.getChildAt(i-1).y-this.displayObjectContainer.getChildAt(i).y;
					}
				}
				this.displayObjectContainer.stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
				this.displayObjectContainer.stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
			}
			
			private function onMouseMove(evt:MouseEvent):void
			{ 
				for(var i:int=0;i<this.displayObjectContainer.numChildren;i++)
				{
					if(i==0)
					{
						draggedObjects[i].x=this.displayObjectContainer.mouseX-offsetX[i];
						draggedObjects[i].y=this.displayObjectContainer.mouseY-offsetY[i];
					}
					else
					{
						draggedObjects[i].x=draggedObjects[i-1].x-offsetX[i];
						draggedObjects[i].y=draggedObjects[i-1].y-offsetY[i];
					}
				}
				evt.updateAfterEvent();
			}
			
			private function onMouseUp(evt:MouseEvent):void
			{
				this.displayObjectContainer.stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
				this.displayObjectContainer.stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);	
			}
        ]]>
    </mx:Script>
    <mx:Canvas id="displayObjectContainer">
    	 <mx:Canvas id="cvs1" name="cvs1" width="200" height="200" x="0" y="0" backgroundColor="red">
        </mx:Canvas>
         <mx:Canvas id="cvs2" name="cvs2" width="200" height="200" x="0" y="200" backgroundColor="yellow">
        </mx:Canvas>
         <mx:Canvas id="cvs3" name="cvs3" width="200" height="200" x="200" y="200" backgroundColor="blue">
        </mx:Canvas>
    </mx:Canvas>
</mx:Application>