Flex拖动技术大全（1）

组件的拖动分为：加强型（即本身就可以拖动设置是否可以拖动的属性即可），非加强型（可以通过DragManager，DragEvent，DragSource三个类来实现）

下面详细讲解常见的拖动，案例比较多，可以自行类推和拓展！

[html] viewplaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">  
3. <mx:Script>  
4.     <![CDATA[ 
5.         import mx.collections.ArrayCollection; 
6.         import mx.core.IUIComponent; 
7.         import mx.events.DragEvent; 
8.         import mx.core.DragSource; 
9.         import mx.managers.DragManager; 
10.        
11.         [Bindable] 
12.         private var listData:ArrayCollection = new ArrayCollection(); 
13.         //拖动初始器 
14.         private function dragSource(myData:String,e:MouseEvent,format:String):void 
15.         { 
16.            var iu:IUIComponent = e.currentTarget as IUIComponent; 
17.             var ds : DragSource = new DragSource(); 
18.             ds.addData(myData,format);//设置一个标号format 
19.             DragManager.doDrag(iu,ds,e); // 开始拖动这个物体 
20.         } 
21.         //当拖进去时 
22.         private function onEnter( e:DragEvent,format:String ) : void 
23.         { 
24.             if(e.dragSource.hasFormat(format))//如果标号为format则接受拖来的物体 
25.             { 
26.                 DragManager.acceptDragDrop(IUIComponent(e.target) );// 接受被拖进来的物体       
27.  
28.    
29.             } 
30.         } 
31.         //当拖完成时 
32.         private function onDrop(e:DragEvent,format:String) : void 
33.         { 
34.             var myData:Object = new Object(); 
35.             myData = e.dragSource.dataForFormat(format); 
36.             list1.dataProvider.addItem(myData);//list1是List的id,要是扩展到其他组件，改这里就可以了。 
37.         } 
38.     ]]>  
39.     </mx:Script>  
40.     <mx:Label text="拖动我到List" width="86" height="27" id="lbl" mouseDown="dragSource('这个是一个label',event,'stringFormat')"/>  
41.     <mx:List dataProvider="{listData}" id="list1" dragEnter="onEnter(event,'stringFormat')"  
42.         dragDrop="onDrop(event,'stringFormat')" width="206">  
43.     </mx:List>  
44.         <!--文档注释-->  
45.      </mx:Application>  

 

 

 

 

 

 

Flex组件内置了处理拖拽事件的接口，有些控件已经实现了拖拽功能，比如List、DataGrid、Menu、

HorizontalList、PrintDataGrid、TileList、Tree，在设置相关的拖拽属性后，它们都可以在相同类型的组件之间利用鼠标来实现数据的转移。
allowDragSelection          是否可以拖选
allowMultipleSelection      是否可以多选
dragEnabled                    是否可以拖动子元素
dragMoveEnabled             是否移动元素位置，而不是复制元素
dropEnabled                    是否可以将物体放置进来

在Flex中，有几个专门的对象供开发者处理拖拽事件：
DragManager：位于mx.managers包中，管理拖拽事件
DragSource：  位于mx.core包中，是Flex框架中的核心成员，处理拖拽中的数据传递
DragEvent：    位于mx.events包中，拖拽操作中的事件对象。

按照逻辑，拖拽中至少有两个对象：一方提供数据，一方接收数据。在这个过程中，提供数据的一方按照前后顺序，可以把整个过程划分为下面几个事件：

mouseDown：鼠标按下。
mouseMove：鼠标移动。
dragComplate：鼠标释放。判断目标是否接受数据，如果可以，拖放成功。

接收方也将经历几个阶段
dragEnter：被拖动对象移动到目标范围中。
dragDrop：鼠标在目标上松开。
dragOver：鼠标移动到目标上。
dragExit：独享被拖离目标范围。

1.  Tree与Tree之间的拖动：

[html] viewplaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
3.                 layout="vertical"  
4.                 verticalAlign="middle">  
5.   
6.     <mx:XML id="myData">  
7.         <data>  
8.             <item label="ActionScript">  
9.                 <item label="Flash"/>  
10.                 <item label="Flex"/>  
11.             </item>  
12.             <item label="Mirage">  
13.             </item>  
14.             <item label="JavaScript"/>  
15.         </data>  
16.     </mx:XML>  
17.   
18.     <mx:XML id="copyData">  
19.         <data>  
20.             <item label="JavaScript"/>  
21.         </data>  
22.     </mx:XML>  
23.   
24.     <mx:Tree dropEnabled="true"  
25.              dragEnabled="true"  
26.              dragMoveEnabled="true"  
27.              allowMultipleSelection="true"  
28.              dataProvider="{myData.item}"  
29.              labelField="@label"/>  
30.   
31.     <mx:Tree dropEnabled="true"  
32.              dataProvider="{copyData.item}"  
33.              labelField="@label"/>  
34. </mx:Application>  

 

上面代码中只需设置
dropEnabled="true" //是否可以将被拖动的物体放置进来
dragEnabled="true" //是否可以拖动子元素
dragMoveEnabled="true" //是否只是移动元素，而不是复制元素
allowMultipleSelection="true"//是否可以多项拖动元素,为true时可以用ctrl选多个一起拖动

List与List之间的拖动，只要设置上面的就可以了。
DataGrid 拖动到DataGrid和List

[html] viewplaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
3.                 layout="vertical"  
4.                 verticalAlign="middle"  
5.                 fontSize="12">  
6.   
7.     <mx:Script>  
8.         <![CDATA[ 
9.             import mx.collections.ArrayCollection; 
10.             import mx.events.DragEvent; 
11.  
12.             [Bindable] 
13.             private var mylist:ArrayCollection; 
14.  
15.             //当拖完成时 
16.             private function onDrop(e:DragEvent):void 
17.             { 
18.                 var myData:Object=new Object(); 
19.                 myData=e.dragSource.dataForFormat('items'); //从dragSource中拿到条目 
20.                 var name:String=myData[0].name; //注意这个地方必需要用变量进行替换 
21.                 list1.dataProvider.addItem(name); 
22.                 e.preventDefault(); //可以去掉默认的数据转移 
23.             } 
24.         ]]>  
25.     </mx:Script>  
26.   
27.     <mx:XMLList id="employees">  
28.         <employee>  
29.             <name>小马</name>  
30.             <phone>13042334532</phone>  
31.             <email>[e-mail]</email>  
32.         </employee>  
33.         <employee>  
34.             <name>张春</name>  
35.             <phone>13642987532</phone>  
36.             <email>[e-mail]</email>  
37.         </employee>  
38.         <employee>  
39.             <name>小李</name>  
40.             <phone>13923485844</phone>  
41.             <email>[e-mail]</email>  
42.         </employee>  
43.     </mx:XMLList>  
44.   
45.     <mx:DataGrid x="10"  
46.                  y="15"  
47.                  width="277"  
48.                  id="dg"  
49.                  rowCount="5"  
50.                  dataProvider="{employees}"  
51.                  dragEnabled="true">  
52.         <mx:columns>  
53.             <mx:DataGridColumn headerText="Name"  
54.                                dataField="name"/>  
55.             <mx:DataGridColumn headerText="Email"  
56.                                dataField="email"/>  
57.             <mx:DataGridColumn headerText="Phone"  
58.                                dataField="phone"/>  
59.         </mx:columns>  
60.     </mx:DataGrid>  
61.   
62.     <mx:DataGrid dropEnabled="true">  
63.         <mx:columns>  
64.             <mx:DataGridColumn headerText="Name"  
65.                                dataField="name"/>  
66.             <mx:DataGridColumn headerText="Email"  
67.                                dataField="email"/>  
68.             <mx:DataGridColumn headerText="Phone"  
69.                                dataField="phone"/>  
70.         </mx:columns>  
71.     </mx:DataGrid>  
72.   
73.     <mx:List height="210"  
74.              width="206"  
75.              id="list1"  
76.              dropEnabled="true"  
77.              dataProvider="{mylist}"  
78.              dragDrop="onDrop(event)">  
79.     </mx:List>  
80.   
81.              </mx:Application>