5.从外部拖动到组件,比如从桌面上拖动一个图片到图片组件等。
因为我的flash包中没有flash.events.NativeDragEvent等。所以这里稍作总结。
拖动外部文件
拖动外部文件需要NativeDragEvent,NativeDragManager类。其实用法和上面的DragManager一样,但是往往一个控件既要接受Flex内部被拖进来的控件,还要接受外部拖进来的文件,这时候显得就比较麻烦了。
但是请不要害怕,这里的Clipboard会帮我解决问题。
<wbr></wbr>
- <</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>
- <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;">/></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr><wbr></wbr></wbr></span></wbr>
- <</span>mx:Button<wbr></wbr>id="btnDrag"<wbr></wbr>label="拖动我"<wbr><wbr></wbr></wbr>
- <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;">/></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><wbr><wbr></wbr></wbr></span></wbr>
- <wbr><wbr></wbr></wbr>
- </</span>span><wbr><wbr></wbr></wbr>
按理来说当拖动内部控件的时候会触发dragDrop事件,拖动外部文件会触发nativeDragDrop事件,事实上,不管你拖动外部文件还是内部控件都会触发这两个事件。这里我们使用Clipboard来解决这一麻烦
<wbr></wbr>
- 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>
- {<wbr><wbr></wbr></wbr>
- <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>
- <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>
- <wbr>DragManager.doDrag(btnDrag,ds,e);<wbr><wbr></wbr></wbr></wbr>
- }<wbr><wbr></wbr></wbr>
- 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>
- {<wbr><wbr></wbr></wbr>
- <wbr>DragManager.acceptDragDrop(<wbr>Canvas(e.target)<wbr>);<wbr><wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr>NativeDragManager.acceptDragDrop(Canvas(e.target));<wbr><wbr></wbr></wbr></wbr>
- <wbr>//使其接受从外部拖进来的文件<wbr><wbr><wbr></wbr></wbr></wbr></wbr>
- }<wbr><wbr></wbr></wbr>
- 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>
- {<wbr><wbr></wbr></wbr>
- <wbr><wbr><wbr></wbr></wbr></wbr>
- }<wbr><wbr></wbr></wbr>
- 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>
- {<wbr><wbr></wbr></wbr>
- <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>
- <wbr>//获取剪切板上的文件列表<wbr><wbr></wbr></wbr></wbr>
- <wbr>if(<wbr>filesObj<wbr>&&<wbr><wbr>filesObj.length<wbr><span style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></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>
- <wbr>{<wbr><wbr></wbr></wbr></wbr>
- <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>
- <wbr><wbr>{<wbr><wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr><wbr>switch(<wbr>item.extension<wbr>)<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr><wbr>{<wbr><wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr><wbr><wbr>case<wbr>"jpg":<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr><wbr><wbr>case<wbr>"bmp":<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr><wbr><wbr>case<wbr>"gif":<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
- <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>
- <wbr><wbr><wbr><wbr>break;<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr><wbr>}<wbr><wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr>}<wbr><wbr></wbr></wbr></wbr></wbr>
- <wbr>}<wbr><wbr></wbr></wbr></wbr>
- <wbr>else<wbr><wbr><wbr>//否则的话是就是在拖动内部的控件<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr>{<wbr><wbr></wbr></wbr></wbr>
- <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>
- <wbr><wbr>//还记得doDrag<wbr>的时候附加的那个<wbr>DragSource<wbr>么?<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr>//这里因为不能用e.dragSource.dataForFormat("xy")了因为事件不一样,<wbr><wbr></wbr></wbr></wbr></wbr>
- <wbr><wbr>//但我们还是可以用剪切板来取得这个值<wbr><wbr></wbr></wbr></wbr></wbr>
- <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>
- <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>
- <wbr>}<wbr><wbr></wbr></wbr></wbr>
- }<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文件中,敲入以下代码: