Flex拖动技术大全（3）

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

拖动外部文件

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

<wbr></wbr>

[html]<wbr><a href="http://blog.csdn.net/voyage_mh1987/article/details/7990139#" title="view plain">view plain</a><a href="http://blog.csdn.net/voyage_mh1987/article/details/7990139#" title="copy">copy</a> <div> </div> </wbr>

1. <</span>span<wbr></wbr>style="font-size:12px;"><</span>mx:Canvas<wbr></wbr>y="40"<wbr></wbr>id="cansAccess"<wbr></wbr>backgroundColor="#000000"<wbr><wbr></wbr></wbr>width="300"<wbr></wbr>height="200"<wbr><wbr></wbr></wbr>
2. <wbr><span style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">dragDrop</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"complete(event)"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr></wbr></span><span style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">nativeDragDrop</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"nativeComplete(event)"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr></wbr></span><span style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">dragEnter</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"enter(event)"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr></wbr></span><span style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">/&gt;</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr><wbr></wbr></wbr></span></wbr>
3. <</span>mx:Button<wbr></wbr>id="btnDrag"<wbr></wbr>label="拖动我"<wbr><wbr></wbr></wbr>
4. <wbr><span style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">mouseDown</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"doDrag(<wbr>event<wbr>)"</wbr></wbr></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr></wbr></span><span style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">/&gt;</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr><wbr></wbr></wbr></span></wbr>
5. <wbr><wbr></wbr></wbr>
6. </</span>span><wbr><wbr></wbr></wbr>

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

<wbr></wbr>

[html]<wbr><a href="http://blog.csdn.net/voyage_mh1987/article/details/7990139#" title="view plain">view plain</a><a href="http://blog.csdn.net/voyage_mh1987/article/details/7990139#" title="copy">copy</a> <div> </div> </wbr>

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

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]<wbr><a href="http://blog.csdn.net/voyage_mh1987/article/details/7990139#" title="view plain">view plain</a><a href="http://blog.csdn.net/voyage_mh1987/article/details/7990139#" title="copy">copy</a> <div> </div> </wbr>

<!--192.168.100.33-->

上一篇： Flex拖动技术大全（2） 下一篇： 高手教你怎么在运行里拼IP地…