mxml文件：

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <control:Test5 xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                   xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*" xmlns:control="components.control.*"> 
  5.     <fx:Declarations> 
  6.         <!-- Place non-visual elements (e.g., services, value objects) here --> 
  7.     </fx:Declarations> 
  8.     <s:Panel id="a" x="57" y="46" width="250" height="200"> 
  9.         <s:layout> 
  10.             <s:TileLayout/> 
  11.         </s:layout> 
  12.         <s:Button label="2"/> 
  13.         <s:Button label="3"/> 
  14.         <s:Button label="4"/> 
  15.         <s:Button label="5"/> 
  16.         <s:Button label="6"/> 
  17.         <s:Button label="7"/> 
  18.         <s:Button label="8"/> 
  19.         <s:Button label="9"/> 
  20.         <s:Button label="1"/> 
  21.     </s:Panel> 
  22.     <s:Panel id="b" x="352" y="46" width="250" height="200"> 
  23.         <s:layout> 
  24.             <s:TileLayout/> 
  25.         </s:layout> 
  26.     </s:Panel> 
  27. </control:Test5> 

ac文件：

  1. package components.control  
  2. {  
  3.     import flash.events.MouseEvent;  
  4.       
  5.     import mx.core.DragSource;  
  6.     import mx.core.UIComponent;  
  7.     import mx.events.DragEvent;  
  8.     import mx.events.FlexEvent;  
  9.     import mx.managers.DragManager;  
  10.     import mx.preloaders.Preloader;  
  11.       
  12.     import spark.components.Panel;  
  13.     import spark.components.Application;  
  14.       
  15.     public class Test5 extends Application  
  16.     {  
  17.         public var a:Panel;  
  18.         public var b:Panel;  
  19.           
  20.         public function Test5()  
  21.         {  
  22.             super();  
  23.             addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);  
  24.         }  
  25.           
  26.         protected function creationCompleteHandler(event:FlexEvent):void  
  27.         {  
  28.             for(var i:int  = 0; i < a.numElements; i++)  
  29.             {  
  30.                 a.getElementAt(i).addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);  
  31.             }  
  32.             a.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);   
  33.             a.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);    
  34.             b.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);   
  35.             b.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);   
  36.         }  
  37.           
  38.         private static function mouseDownHandler(event:MouseEvent):void   
  39.         {    
  40.             var dragInitiator:UIComponent = UIComponent(event.currentTarget);   
  41.             var ds:DragSource = new DragSource();   
  42.             ds.addData(dragInitiator, "myRule");  
  43.             DragManager.doDrag(dragInitiator, ds, event);   
  44.         }   
  45.           
  46.         private static function dragEnterHandler(event:DragEvent):void   
  47.         {   
  48.             if (event.dragSource.hasFormat("myRule"))   
  49.             {   
  50.                 DragManager.acceptDragDrop(UIComponent(event.currentTarget));  
  51.             }   
  52.         }   
  53.           
  54.         private static function dragDropHandler(event:DragEvent):void   
  55.         {   
  56.             var dragObject:UIComponent = UIComponent(event.dragInitiator);   
  57.             Panel(event.currentTarget).addElement(dragObject);  
  58.         }   
  59.     }  
  60. } 

flex里面主要通过

  • DragManager：mx.managers 包中，管理拖拽事件
  • DragSource：mx.core 包中，是Flex 框架的核心成员，处理拖拽中的数据传递
  • DragEvent:：mx.events 包中，拖拽操作中的事件对象

来实现拖拽的功能。