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>