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>liuhai@163.com</email>  
  32.         </employee>  
  33.         <employee>  
  34.             <name>张春</name>  
  35.             <phone>13642987532</phone>  
  36.             <email>zhang@sina.com</email>  
  37.         </employee>  
  38.         <employee>  
  39.             <name>小李</name>  
  40.             <phone>13923485844</phone>  
  41.             <email>xiaoli@qq.com</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:woai_php@sina.com  
  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:woai_php@sina.com  
  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:woai_php@sina.com  
  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:woai_php@sina.com  
  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:woai_php@sina.com  
  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），否则可能无法产生相应区域。

posted on 2011-08-12 17:25  破阵子 . 如是我闻  阅读(2218)  评论(0)  编辑  收藏  举报

导航