Flex拖动技术大全（3）

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

拖动外部文件

拖动外部文件需要NativeDragEvent，NativeDragManager类。其实用法和上面的DragManager一样，但是往往一个控件既要接受Flex内部被拖进来的控件，还要接受外部拖进来的文件，这时候显得就比较麻烦了。
但是请不要害怕，这里的Clipboard会帮我解决问题。

 

[html]  view plain copy

1. <</span>span style="font-size:12px;"><</span>mx:Canvas y="40" id="cansAccess" backgroundColor="#000000"  width="300" height="200"  
2.  dragDrop="complete(event)" nativeDragDrop="nativeComplete(event)" dragEnter="enter(event)" />  
3. <</span>mx:Button id="btnDrag" label="拖动我"  
4.  mouseDown="doDrag( event )" />  
5.   
6. </</span>span>  

按理来说当拖动内部控件的时候会触发dragDrop事件，拖动外部文件会触发nativeDragDrop事件，事实上，不管你拖动外部文件还是内部控件都会触发这两个事件。这里我们使用Clipboard来解决这一麻烦

 

[html]  view plain copy

1. private function doDrag( e : MouseEvent ) : void  
2. {  
3.  var ds : DragSource = new DragSource;  
4.  ds.addData( {"x" : e.localX, "y" : e.localY},"xy");  
5.  DragManager.doDrag(btnDrag,ds,e);  
6. }  
7. private function enter( e  :DragEvent ) : void  
8. {  
9.  DragManager.acceptDragDrop( Canvas(e.target) );  
10.  NativeDragManager.acceptDragDrop(Canvas(e.target));  
11.  //使其接受从外部拖进来的文件   
12. }  
13. private function complete( e : DragEvent ) : void  
14. {  
15.    
16. }  
17. private function nativeComplete( e : NativeDragEvent ) : void  
18. {  
19.  var filesObj : Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT ) as Array;  
20.  //获取剪切板上的文件列表  
21.  if( filesObj &&  filesObj.length > 0)  //符合这一条件说明是从外部拖文件进来  这里假设处理拖进来的是图片  
22.  {  
23.   for each( var item : File in filesObj )  
24.   {  
25.    switch( item.extension )  
26.    {  
27.     case "jpg":  
28.     case "bmp":  
29.     case "gif":  
30.     var img : Image = new Image;     img.source = item.nativePath;     cansAccess.addChild( img );  
31.     break;     
32.    }  
33.   }  
34.  }  
35.  else   //否则的话是就是在拖动内部的控件  
36.  {  
37.   var xy : Object =  e.clipboard.getData(e.clipboard.formats[0]);  
38.   //还记得doDrag 的时候附加的那个 DragSource 么？  
39.   //这里因为不能用e.dragSource.dataForFormat("xy")了因为事件不一样，  
40.   //但我们还是可以用剪切板来取得这个值  
41.   btnDrag.x =  e.localX - xy.x + cansAccess.x;  
42.   btnDrag.y =  e.localY - xy.y + cansAccess.y;  
43.  }  
44. }  

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

来做一个简单的示例，按照下述的步骤，你会了解到在Flex中使用flex-drag-n-drop-lib的技巧。
1.点击这里下载SWC组件到你的桌面。
2.打开FlexBuilder，新建一个Flex Project，在第三步的Library Path选项中，点击Add SWC按钮，将刚才下

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

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

[html]  view plain copy