Flex 拖动数据到 TextInput输入域 的简单实现

如有转载请注明出处，谢谢。

在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() 方法。要想实现，这个方法必须调用。

 

 

之前在网上搜了好多，但是都不太合适，所以自己试着写的，各位如果有什么好的建议，意见，多指教。