Flex中拖动/拖放,简明教程

蒋金阳 · 发表于 2009-6-9 03:36:34

1,关于组件的拖动 flex里边有很多组件支持拖动，如Tree，DataGrid，TileList，Tile等，只要设置相应的属性便可进行拖动管理 这里针对Tree组件举个简单的例子，其它组件类似。 代码如下： 代码:

<mx:XML id="myData"> <data> <item label="ActionScript"> <item label="Flash" /> <item label="Flex" /> </item> <item label="Mirage"> </item> <item label="JavaScript"/> </data></mx:XML><mx:XML id="copyData"> <data> <item label="JavaScript"/> </data></mx:XML><mx:Tree dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" allowMultipleSelection="true" dataProvider="{myData.item}" labelField="@label" dragDrop="findSource( event )" /> <mx:Tree dropEnabled="true" dataProvider="{copyData.item}" labelField="@label"/>

[/pre] 上面代码中只需设置 dropEnabled="true" //是否可以将被拖动的物体放置进来 dragEnabled="true" //是否可以拖动子元素 dragMoveEnabled="true" //是否只是移动元素，而不是复制元素 allowMultipleSelection="true" //是否可以多项拖动元素 这些属性，该组件便可拖移了，拖移之后相应的数据源 dataProvider 也发生了变化，如顺序等。而且数据相同的两个组件间也可以进行相互拖动。 除了这些还需注意的时如何接受被拖动进来的物体。上面代码中有个事件 dragDrop="findSource( event )" 函数如下: 代码:

private function findSource( e : DragEvent ) : void{ var source : Object = e.dragSource.dataForFormat("treeItems");}

[/pre] 其中source指向的是被拖动的元素，而e.dragSource属DragSource类型的对象。至于"treeItems"字符串，各个组件代表的不同，如DataGrid的是"item"。 2,拖动单个控件 拖动单个物体需要DragEvent，DragSource，DragManager代码如下 代码:

<mx:Canvas y="40" id="cansAccess" backgroundColor="#000000" width="300" height="200" dragDrop="complete(event)" dragEnter="enter(event)"/><mx:Button id="btnDrag" label="拖动我" mouseDown="doDrag( event )" />private function doDrag( e : MouseEvent ) : void{ var ds : DragSource = new DragSource; ds.addData( {"x" : e.localX, "y" : e.localY},"xy"); DragManager.doDrag(btnDrag,ds,e); // 开始拖动这个物体 btnDrag}private function enter( e

ragEvent ) : void{ DragManager.acceptDragDrop( Canvas(e.target) ); // cansAccess 接受被拖进来的物体}private function complete( e : DragEvent ) : void{ var xy : Object = e.dragSource.dataForFormat("xy"); // 获取数据对象也就是在doDrag函数中写的DragSource对象 btnDrag.x = this.mouseX - xy.x; btnDrag.y = this.mouseY - xy.y;}

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

<mx:Canvas y="40" id="cansAccess" backgroundColor="#000000" width="300" height="200" dragDrop="complete(event)" nativeDragDrop="nativeComplete(event)" dragEnter="enter(event)" /><mx:Button id="btnDrag" label="拖动我" mouseDown="doDrag( event )" />

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

private function doDrag( e : MouseEvent ) : void{ var ds : DragSource = new DragSource; ds.addData( {"x" : e.localX, "y" : e.localY},"xy"); DragManager.doDrag(btnDrag,ds,e);}private function enter( e

ragEvent ) : void{ DragManager.acceptDragDrop( Canvas(e.target) ); NativeDragManager.acceptDragDrop(Canvas(e.target)); //使其接受从外部拖进来的文件 }private function complete( e : DragEvent ) : void{ /* */}private function nativeComplete( e : NativeDragEvent ) : void{ var filesObj : Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT ) as Array; //获取剪切板上的文件列表 if( filesObj && filesObj.length > 0) //符合这一条件说明是从外部拖文件进来这里假设处理拖进来的是图片 { for each( var item : File in filesObj ) { switch( item.extension ) { case "jpg": case "bmp": case "gif": var img : Image = new Image; img.source = item.nativePath; cansAccess.addChild( img ); break; } } } else //否则的话是就是在拖动内部的控件 { var xy : Object = e.clipboard.getData(e.clipboard.formats[0]); //还记得doDrag 的时候附加的那个 DragSource 么？ //这里因为不能用e.dragSource.dataForFormat("xy")了因为事件不一样， //但我们还是可以用剪切板来取得这个值 btnDrag.x = e.localX - xy.x + cansAccess.x; btnDrag.y = e.localY - xy.y + cansAccess.y; }}

[/pre] end...... <blockquote class="blockquote">From: http://www.ia56.com/read-htm-tid-33.html Powered by PHPWind.com</blockquote>

Flex中拖动/拖放,简明教程

浏览过的版块