Flex 让组件动起来

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

组件代码

packageMoveComponent

{
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>