Flex 实现组件拖曳（三）

 

默认情况下，在拖拽操作中使用的图像是一个包含透明度的矩形。这个在拖操作开始时被 渲

染的显示对象被称为拖拽代理。通过给 dragImage 参数传递一个 IFlexDisplayObject 实例 ，

你可以改变这幅图像。 Flex 框架提供的绝大部分组件都能用作拖拽代理，因为它们都扩展

了 mx.core.UIComponent 类，而该类实现了 IFlexDisplayObject 接口。虽然添加一个拖拽

代理是表现物体正被移动到何处的一个简单方法，但这样做更多是为了防止不必要的误拖

拽。 BitmapAsset 类同样实现了 IFlexDisplayObject 接口，并且它能方便地抓取应用程序

中正在移动的可视对象的位图数据。

Code:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application 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" minWidth="955" minHeight="600" width="100%" height="100%">  
5.     <s:layout>  
6.         <s:HorizontalLayout verticalAlign="middle"/>  
7.     </s:layout>  
8.     <fx:Declarations>  
9.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
10.     </fx:Declarations>  
11.       
12.     <fx:Script>  
13.         <![CDATA[ 
14.             import mx.core.BitmapAsset; 
15.             import mx.core.DragSource; 
16.             import mx.core.IUIComponent; 
17.             import mx.events.DragEvent; 
18.             import mx.managers.DragManager; 
19.              
20.             private static const FORMAT:String = "box"; 
21.             private var xoffset:Number; 
22.             private var yoffset:Number; 
23.              
24.             private function mouseDownHandle(evt:MouseEvent):void { 
25.                  
26.                 xoffset = evt.localX; 
27.                 yoffset = evt.localY; 
28.                  
29.                 var initiator:Box = evt.currentTarget as Box; 
30.                 //BitmapAsset 是 flash.display.Bitmap 类的子类，表示您在 Flex 应用程序中嵌入的位图图像 
31.                 var proxyBox:BitmapAsset = new BitmapAsset(); 
32.                  
33.                 //Bitmap 类表示用于表示位图图像的显示对象。 
34.                 proxyBox.bitmapData = new BitmapData(initiator.width, initiator.height); 
35.                 proxyBox.bitmapData.draw(initiator); 
36.                  
37.                 //DragSource 类中包含正被拖动的数据 
38.                 var dragSource:DragSource = new DragSource(); 
39.                  
40.                 //addData(data:Object, format:String):void向拖动源添加数据和相应的格式 String。 
41.                 dragSource.addData(initiator, FORMAT); 
42.                  
43.                 //启动拖放操作。 
44.                 //dragInitiator:IUIComponent — 指定启动拖动的组件的 IUIComponent。 
45.                 //dragSource:DragSource — 包含正在拖动的数据的 DragSource 对象。 
46.                 //mouseEvent:MouseEvent — 包含与启动拖动相关的鼠标信息的 MouseEvent 
47.                 DragManager.doDrag(initiator, dragSource, evt, proxyBox, 0, 0, 0.5); 
48.             } 
49.              
50.             private function dragEnterHandle(evt:DragEvent):void { 
51.                 //如果数据源中包含请求的格式，则返回 true；否则，返回 false。 
52.                 if(evt.dragSource.hasFormat(FORMAT)) {           
53.                     DragManager.acceptDragDrop(Canvas(evt.currentTarget)); 
54.                 } 
55.             } 
56.             private function dropHandle(evt:DragEvent):void {    
57.                 //确定拖动后的位置 
58.                 var box:Box = Box(evt.dragInitiator); 
59.                 box.x = evt.localX - xoffset; 
60.                 box.y = evt.localY - yoffset; 
61.             } 
62.         ]]>  
63.     </fx:Script>  
64.     <mx:Canvas id="canvas"  
65.                backgroundColor="0xEEEEEE"  
66.                width="80%" height="80%"  
67.                dragEnter="dragEnterHandle(event);"  
68.                dragDrop="dropHandle(event);">  
69.         <mx:Box id="dragItem"   
70.                 width="20%" height="20%"  
71.                 backgroundColor="0x00FFCC"  
72.                 mouseDown="mouseDownHandle(event);" />  
73.     </mx:Canvas>  
74.       
75. </s:Application>