Flex 让组件动起来

flex下创建组件、模块是无法移动的，但是我们发现这些对象都实现了UIComponent，通过UIComponent的startDrag、stopDrag方法便可让它可拖动。

组件代码

package MoveComponent

{
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.core.UIComponent;
	
	import spark.components.Group;
	import spark.components.SkinnableContainer;
	
	import MoveComponent.skinComponent;
	
	public class MComponent extends SkinnableContainer
	{
		
		[SkinPart(required="false")]
		public var MainGroup:Group;
		
		[SkinPart(required="false")]
		public var titleGroup:Group;
		
		[SkinPart(required="false")]
		public var conGroup:Group;
		
		public function MComponent()
		{
			super();
			this.setStyle("skinClass", skinComponent);
		}
		
		protected override function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			if (instance == MainGroup)
			{
				MainGroup.addEventListener(MouseEvent.MOUSE_DOWN, mouse_downHandler);
				MainGroup.addEventListener(MouseEvent.MOUSE_UP, mouse_upHandler);
				
			}
			if (instance == titleGroup)
			{
				titleGroup.addEventListener(MouseEvent.MOUSE_DOWN, mouse_downHandler);
				titleGroup.addEventListener(MouseEvent.MOUSE_UP, mouse_upHandler);
			}
		}
		
		public function mouse_downHandler(event:MouseEvent):void
		{
			
			titleGroup.addEventListener(MouseEvent.MOUSE_MOVE, mouse_moveHandler);
			MainGroup.addEventListener(MouseEvent.MOUSE_MOVE, mouse_moveHandler);
			
		}
		
		private function mouse_moveHandler(event:MouseEvent):void
		{			
			this.alpha=0.7;
			var widget:UIComponent=parent as UIComponent;
			widget.startDrag();			
		}
		
		private function mouse_upHandler(event:MouseEvent):void
		{
			titleGroup.removeEventListener(MouseEvent.MOUSE_MOVE, mouse_moveHandler);
			MainGroup.removeEventListener(MouseEvent.MOUSE_MOVE, mouse_moveHandler);
			
			this.alpha=1;
			var widget:UIComponent=parent as UIComponent;
			
			widget.stopDrag();
			widget.x=appWidth - widget.width - 10;
			
		}

	}
}

工程代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:MoveComponent="MoveComponent.*">
<fx:Script>
<![CDATA[


]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>

<MoveComponent:MComponent id="MC" height="400" width="300">

</MoveComponent:MComponent>
</s:Application>