FLEX 拖动技术汇总

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之间的拖动:

Xml代码 复制代码  收藏代码
  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

Xml代码 复制代码  收藏代码
  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>[email protected]</email>  
  32.         </employee>  
  33.         <employee>  
  34.             <name>张春</name>  
  35.             <phone>13642987532</phone>  
  36.             <email>[email protected]</email>  
  37.         </employee>  
  38.         <employee>  
  39.             <name>小李</name>  
  40.             <phone>13923485844</phone>  
  41.             <email>[email protected]</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.     <!--文档注释-->  
  82.     <mx:TextInput width="500"  
  83.                   height="146"  
  84.                   horizontalCenter="0"  
  85.                   verticalCenter="-204"  
  86.                   fontWeight="normal"  
  87.                   textAlign="center">  
  88.   
  89.         <mx:htmlText>  
  90.             <![CDATA[  
  91.                 Date: 2009.05.05  
  92.                 Email:[email protected]  
  93.                 QQ:1019822077  
  94.                 Blog:  
  95.                 <font color="#FF0000">  
  96.                    <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex">  
  97.                           http://hi.baidu.com/woaidelphi/blog/category/Flex  
  98.                    </a>  
  99.                 </font>  
  100.                   华夏之星希望和你成为朋友。一起学习,共同奋斗!!!。。。  
  101.             ]]>  
  102.         </mx:htmlText>  
  103.     </mx:TextInput>  
  104. </mx:Application>  
     
     

2.非加强拖动技术
Label的拖动,可以扩展到其他组件

Xml代码 复制代码  收藏代码
  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:TextInput width="500" height="146" horizontalCenter="0" verticalCenter="-204"  
  46.         fontWeight="normal" textAlign="center">  
  47.     <mx:htmlText>  
  48.         <![CDATA[  
  49.              Date: 2009.05.05  
  50.              Email:[email protected]  
  51.              QQ:1019822077  
  52.              Blog:<font color="#FF0000">  
  53.              <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex">  
  54.                 http://hi.baidu.com/woaidelphi/blog/category/Flex  
  55.              </a>  
  56.              </font>  
  57.              华夏之星希望和你成为朋友。一起学习,共同奋斗!!!。。。  
  58.         ]]>  
  59.     </mx:htmlText>  
  60.     </mx:TextInput>  
  61. </mx:Application>  
     
     

Button的拖动,可以扩展到其他组件

Xml代码 复制代码  收藏代码
  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.     <mx:Script>  
  7.         <![CDATA[  
  8.             import mx.core.IUIComponent;  
  9.             import mx.events.DragEvent;  
  10.             import mx.core.DragSource;  
  11.             import mx.managers.DragManager;  
  12.  
  13.             //拖动初始器  
  14.             private function dragSource(e:MouseEvent, format:String):void  
  15.             {  
  16.                 var iu:IUIComponent=e.currentTarget as IUIComponent;  
  17.                 var ds:DragSource=new DragSource();  
  18.                 ds.addData({"x": e.localX, "y": e.localY}, format); //设置一个标号format  
  19.                 DragManager.doDrag(iu, ds, e);  
  20.             }  
  21.  
  22.             //当拖进去时  
  23.             private function onEnter(e:DragEvent, format:String):void  
  24.             {  
  25.                 if (e.dragSource.hasFormat(format)) //如果标号为format则接受拖来的物体  
  26.                 {  
  27.                     DragManager.acceptDragDrop(IUIComponent(e.target));  
  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.                 btn.x=this.mouseX - myData.x; //btn为按钮的id,要是扩展到其他组件,改这里就可以了。  
  37.                 btn.y=this.mouseY - myData.y;  
  38.             }  
  39.         ]]>  
  40.     </mx:Script>  
  41.     <mx:Canvas y="40"  
  42.                id="cansAccess"  
  43.                backgroundColor="#000000"  
  44.                width="300"  
  45.                height="200"  
  46.                dragEnter="onEnter(event,'formatString')"  
  47.                dragDrop="onDrop(event,'formatString')"/>  
  48.     <mx:Button id="btn"  
  49.                label="拖动我到面板"  
  50.                mouseDown="dragSource(event,'formatString')"/>  
  51.     <!--文档注释-->  
  52.     <mx:TextInput width="500"  
  53.                   height="146"  
  54.                   horizontalCenter="0"  
  55.                   verticalCenter="-204"  
  56.                   fontWeight="normal"  
  57.                   textAlign="center">  
  58.         <mx:htmlText>  
  59.             <![CDATA[  
  60.              Date: 2009.05.05  
  61.              Email:[email protected]  
  62.              QQ:1019822077  
  63.              Blog:<font color="#FF0000">  
  64.              <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex">  
  65.                 http://hi.baidu.com/woaidelphi/blog/category/Flex  
  66.              </a></font>  
  67.              华夏之星希望和你成为朋友。一起学习,共同奋斗!!!。。。  
  68.         ]]>  
  69.         </mx:htmlText>  
  70.     </mx:TextInput>  
  71.   
  72. </mx:Application>   

一定要注意,标签的先后位置,Button 要在Canvas 之后.


3.Canvas容器中拖动Box,你还可以在Box中添加图片等。

Xml代码 复制代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.                 layout="absolute"  
  4.                 fontSize="12">  
  5.     <mx:Script>  
  6.         <![CDATA[  
  7.             import mx.containers.Box;  
  8.             import mx.containers.Canvas;  
  9.             import mx.core.IUIComponent;  
  10.             import mx.events.DragEvent;  
  11.             import mx.managers.DragManager;  
  12.             import mx.core.DragSource;  
  13.  
  14.             //拖动初始器  
  15.             private function dragSource(e:MouseEvent, format:String):void  
  16.             {  
  17.                 var iu:IUIComponent=e.currentTarget as IUIComponent;  
  18.                 var ds:DragSource=new DragSource();  
  19.                 ds.addData(iu, format); //设置一个标号format  
  20.                 DragManager.doDrag(iu, ds, e); // 开始拖动这个物体  
  21.             }  
  22.  
  23.             //当拖进去时  
  24.             private function onEnter(e:DragEvent, format:String):void  
  25.             {  
  26.                 if (e.dragSource.hasFormat(format)) //如果标号为format则接受拖来的物体  
  27.                 {  
  28.                     DragManager.acceptDragDrop(IUIComponent(e.target)); // 接受被拖进来的物体        
  29.                 }  
  30.             }  
  31.  
  32.             //当拖完成时  
  33.             private function onDrop(e:DragEvent, format:String):void  
  34.             {  
  35.                 var box:Box=Box(e.dragInitiator); //如果扩展到其他组件,改这里Box就可以了。  
  36.                 box.x=e.localX;  
  37.                 box.y=e.localY;  
  38.             }  
  39.         ]]>  
  40.     </mx:Script>  
  41.   
  42.     <mx:Canvas backgroundColor="0xEEEEEE"  
  43.                width="500"  
  44.                height="246"  
  45.                horizontalCenter="0"  
  46.                verticalCenter="0"  
  47.                dragEnter="onEnter(event,'boxFormat')"  
  48.                dragDrop="onDrop(event,'boxFormat')">  
  49.         <mx:Box id="boxDrag"  
  50.                 width="20"  
  51.                 height="20"  
  52.                 backgroundColor="0x00FFCC"  
  53.                 x="97"  
  54.                 y="47"  
  55.                 mouseDown="dragSource(event,'boxFormat');">  
  56.         </mx:Box>  
  57.     </mx:Canvas>  
  58.     <!--文档注释-->  
  59.     <mx:TextInput width="500"  
  60.                   height="146"  
  61.                   horizontalCenter="0"  
  62.                   verticalCenter="-204"  
  63.                   fontWeight="normal"  
  64.                   textAlign="center">  
  65.         <mx:htmlText>  
  66.             <![CDATA[  
  67.              Date: 2009.05.05  
  68.              Email:[email protected]  
  69.              QQ:1019822077  
  70.              Blog:<font color="#FF0000">  
  71.              <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex">  
  72.                 http://hi.baidu.com/woaidelphi/blog/category/Flex  
  73.              </a></font>  
  74.                华夏之星希望和你成为朋友。一起学习,共同奋斗!!!。。。  
  75.         ]]>  
  76.         </mx:htmlText>  
  77.     </mx:TextInput>  
  78. </mx:Application>  
     
     

4.图片的拖动

Xml代码 复制代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.                 layout="vertical"  
  4.                 width="100%"  
  5.                 height="100%"  
  6.                 fontSize="12">  
  7.     <mx:Script>  
  8.         <![CDATA[  
  9.             private var oldX:Number; //拖动开始是的坐标  
  10.             private var oldY:Number;  
  11.  
  12.             //拖动开始  
  13.             private function dragStart(event:MouseEvent):void  
  14.             {  
  15.                 oldX=event.stageX; //相对Application的坐标  
  16.                 oldY=event.stageY;  
  17.             }  
  18.  
  19.             //拖动结束  
  20.             private function dragEnd(event:MouseEvent):void  
  21.             {  
  22.                 lbl.text="Local (x,y):" + event.localX.toString() + "," + event.localX.toString(); //相对图片的坐标  
  23.                 lbl2.text="Stage (x,y):" + event.stageX.toString() + "," + event.stageY.toString(); //相对Application的坐标  
  24.                 if (event.buttonDown)  
  25.                 { //如果鼠标在移动过程中并且按下,也就是说鼠标的拖动事件。  
  26.                     var x:Number=event.stageX - oldX; //相对Application的坐标的移动量  
  27.                     var y:Number=event.stageY - oldY;  
  28.                     oldX=event.stageX; //更新拖动开始是的坐标  
  29.                     oldY=event.stageY;  
  30.                     img.move(img.x + x, img.y + y); //img是 Image的id,如果扩展到其他组件,改这里就可以了。  
  31.                 }  
  32.             }  
  33.         ]]>  
  34.     </mx:Script>  
  35.     <mx:Label x="10"  
  36.               y="10"  
  37.               text=""  
  38.               id="lbl"/>  
  39.     <mx:Label x="10"  
  40.               y="27"  
  41.               text=""  
  42.               id="lbl2"/>  
  43.     <mx:Panel x="257"  
  44.               y="71"  
  45.               width="700"  
  46.               height="80%"  
  47.               layout="absolute"  
  48.               horizontalScrollPolicy="off"  
  49.               verticalScrollPolicy="off"  
  50.               title="图片在面板中的拖动例子"  
  51.               fontSize="12">  
  52.         <mx:Image id="img"  
  53.                   x="0"  
  54.                   y="0"  
  55.                   source="test.JPG"  
  56.                   mouseMove="dragEnd(event)"  
  57.                   mouseDown="dragStart(event)"/>  
  58.     </mx:Panel>  
  59.     <!--文档注释-->  
  60.     <mx:TextInput width="500"  
  61.                   height="146"  
  62.                   fontWeight="normal"  
  63.                   textAlign="center">  
  64.         <mx:htmlText>  
  65.             <![CDATA[  
  66.              Date: 2009.05.05  
  67.              Email:[email protected]  
  68.              QQ:1019822077  
  69.              Blog:<font color="#FF0000">  
  70.              <ahref="http://hi.baidu.com/woaidelphi/blog/category/Flex">  
  71.                 http://hi.baidu.com/woaidelphi/blog/category/Flex  
  72.              </a></font>  
  73.              华夏之星希望和你成为朋友。一起学习,共同奋斗!!!。。。  
  74.         ]]>  
  75.         </mx:htmlText>  
  76.     </mx:TextInput>  
  77. </mx:Application>  
     

 

5.从外部拖动到组件,比如从桌面上拖动一个图片到图片组件等。
因为我的flash包中没有flash.events.NativeDragEvent等。所以这里先不总结了。


6.引入dNdLib.swc库让拖动变得更简单
Flex开放了它的拖拽库(即:flex-drag-n-drop-lib),我们可以利用它做一些很有用的拖拽应用,下面我们

来做一个简单的示例,按照下述的步骤,你会了解到在Flex中使用flex-drag-n-drop-lib的技巧。
1.点击这里下载SWC组件到你的桌面。

http://code.google.com/p/flex-drag-n-drop-lib/downloads/list
2.打开FlexBuilder,新建一个Flex Project,在第三步的Library Path选项中,点击Add SWC按钮,将刚才下

载到的SWC组件引入到项目中。


3.点击Finish,在自动创建的MXML文件中,敲入以下代码:

Xml代码 复制代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.                 layout="absolute"  
  4.                 xmlns:containers="dNdLib.containers.*"  
  5.                 fontSize="12">  
  6.     <mx:Script>  
  7.         <![CDATA[  
  8.             import dNdLib.managers.DnDManager;  
  9.         ]]>  
  10.     </mx:Script>  
  11.     <containers:DnDContainer borderStyle="solid"  
  12.                              id="left"  
  13.                              backgroundColor="#FFFFFF"  
  14.                              width="161"  
  15.                              height="237"  
  16.                              x="110"  
  17.                              y="168">  
  18.         <mx:Button label="拖动我"  
  19.                    mouseDown="DnDManager.getInstance().doDrag(event)"  
  20.                    width="92"  
  21.                    height="32"/>  
  22.         <mx:CheckBox label="拖动就这么简单"  
  23.                      mouseDown="DnDManager.getInstance().doDrag(event)"/>  
  24.     </containers:DnDContainer>  
  25.   
  26.     <containers:DnDContainer borderStyle="solid"  
  27.                              id="bottom"  
  28.                              backgroundColor="#FFFFFF"  
  29.                              x="415"  
  30.                              y="168"  
  31.                              width="140"  
  32.                              height="237"/>  
  33. </mx:Application>  

然后Run一下看看结果吧,组件可以拖动了。很简单吧。
注意:必须为DnDContainer设置一个背景色(backgroundColor=color),否则可能无法产生相应区域。

你可能感兴趣的:(Flex)