如有转载请注明出处,谢谢。
在Flex开发中遇到这样一个需求,并且已经实现,拿出来跟各位分享。
现在来说一下,实现数据拖动显示的原理:
这里的实现方法是利用TextInput输入域中两个属性,dragDrop和dragEnter实现的。
首先
需要数据源,这个数据源如果在真正的开发中肯定是从后台传来的,这里我为了演示方便使用了DataGrid,在<fx:Declarations/>中 模拟了数据源,通过DataGrid中的dataProvider属性注入其中。
之后
在 TextInput 中加入dragDrop和dragEnter两属性,创建实现方法dr_dragDropHandler(),dr_dragEnterHandler().
在dr_dragDropHandler()方法中,将DataGrid中选中的数据赋值给Object类型的item,根据item的索引拿到当前所选的值,也就是要拖动的数据。判断之后,根据TextInput的Id为其赋值。
在dr_dragEnterHandler()方法中,根据DragEvent事件提供的方法,将当前事件中所带的值转换成IUIComponent类型,将IUIComponent类型的obj作为参数注入到DragManager.acceptDragDrop()
中。
大功告成。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <fx:XMLList id="personList"> <employee> <name>刘海</name> </employee> <employee> <name>张春</name> </employee> <employee> <name>小李</name> </employee> </fx:XMLList> </fx:Declarations> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.core.IUIComponent; import mx.events.DragEvent; import mx.managers.DragManager; protected function dr_dragDropHandler(event:DragEvent):void { trace("--------dragDrop"); var item:Object=dg.selectedItem; var name:String=item[0].name; if (dr.text == "") { dr.text=name; } else { dr.text+="," + name; } // Alert.show("技术人员:"+dr.text); } protected function dr_dragEnterHandler(evt:DragEvent):void { // Alert.show("dragEnter"); trace("-------dragEnter"); var obj:IUIComponent=IUIComponent(evt.currentTarget); DragManager.acceptDragDrop(obj); } ]]> </fx:Script> <mx:DataGrid x="10" y="15" width="90" id="dg" rowCount="5" dataProvider="{personList}" dragEnabled="true"> <mx:columns> <mx:DataGridColumn headerText="技术人员" dataField="name"/> </mx:columns> </mx:DataGrid> <mx:FormItem label="技术人员 : " x="108" y="25"> <s:TextInput id="dr" width="180" editable="false" toolTip="不可编辑" dragDrop="dr_dragDropHandler(event)" dragEnter="dr_dragEnterHandler(event)"/> </mx:FormItem> </s:Application>
下面介绍下
dragDrop
mx.core.UIComponent.dragDrop
用户在放置目标上释放鼠标时由放置目标分派。可以使用此事件处理函数将拖动数据添加到放置目标。
dragEnter
mx.core.UIComponent.dragEnter
当用户在拖动操作过程中将鼠标移动到某个组件所处的位置时,由该组件分派。如果应用程序在 Flash Player 中运行,则当用户将鼠标移至任何组件所处的位置时,将多次分派此事件。如果应用程序在 AIR 中运行,则只分派此事件一次。
为使放置目标有效,您必须为此事件定义处理函数。在处理函数中,您可以通过更改放置目标的外观向用户提供可视反馈,即组件可以接受此拖动。例如,您可以围绕放置目标绘制一个边框,或者为放置目标提供焦点。
如果希望接受拖动,您必须调用 DragManager.acceptDragDrop()
方法。要想实现,这个方法必须调用。
之前在网上搜了好多,但是都不太合适,所以自己试着写的,各位如果有什么好的建议,意见,多指教。