`
lzj89566062
  • 浏览: 1966 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • Flex
阅读更多

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

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

 

 

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


 

  • 大小: 8.5 KB
0
0
分享到:
评论

相关推荐

    关于FLEX4文章的绘画板中的写文字的功能

    这可以通过创建一个`TextInput`组件来实现,让用户输入文字,并且在按下某个按钮时,将文字绘制到绘画板上。 ```xml &lt;s:TextInput id="textInput" width="100%" height="30" /&gt; 添加文字" click="addText()" /&gt; ```...

    Flex做的E都市地图源码

    1. **Flex组件库**:Flex提供了一系列预定义的UI组件,如Button、TextInput、Canvas等,这些组件使得开发者可以快速构建用户界面。在E都市地图源码中,可能会使用Map组件来显示地图,并配合其他组件如Button、Slider...

    Flex开发自定义控件

    &lt;mx:TextInput id="password" width="159" height="30" textAlign="left" displayAsPassword="true"/&gt; 登录" x="190" y="118"/&gt; ``` 4. **事件处理**: - 为登录按钮添加事件监听器,处理登录逻辑,例如...

    flex3的cookbook书籍完整版dpf(包含目录)

    在TextInput及TextArea控件上使用Validator 和Formatter 15.2节. 如何创建一个自定义的Formatter 15.3节. 使用正则表达式创建国际化邮政编码Validator 15.4节. 如何创建一个Validator去验证通用商品代码(UPC) 15.5...

    Flex3.5 mx.controls源文件包

    2. **TextInput**: 用于接收用户输入文本的字段,可配置多种属性,如是否允许多行输入、字符限制等。 3. **TextArea**: 类似于TextInput,但支持多行文本输入,常用于长文本编辑。 4. **Label**: 显示静态文本的组件...

    flex 一问一答

    对于其他组件,如`TextInput`,可以直接在组件上定义`toolTip`属性并为其创建样式。 7. `HTTPService`组件并不局限于获取XML格式的数据。它可以处理任何类型的响应,包括JSON、文本或二进制数据。只需确保在请求中...

    Flex4.0自定义控件

    - 在主程序中,可以通过组件浏览器找到自定义的`CLogin`组件,并将其拖拽到设计面板上使用。 - 示例代码如下: ```xml *"&gt; &lt;![CDATA[ import mx.controls.Alert; private function btnClick():void { ...

    flex 绘制数学函数图象的源码 原创

    这些可以通过事件监听器实现,如`Slider`的`change`事件或`TextInput`的`change`事件。 总的来说,使用Flex绘制数学函数图象是一个结合了数学、编程和交互设计的好项目。通过这个过程,初学者可以深入了解Flex的...

    flex部分控件代码

    - `&lt;s:TextInput id="t2" x="133" y="167" text="{t1.text}"/&gt;` 创建了另一个文本输入框`t2`,其位置坐标为`(133, 167)`,初始显示的文本内容为`t1`文本框中的内容。 #### 5. **水平滑块(HSlider)** ```xml ()" ...

    flex题目大全

    - **答案**:将`&lt;mx:TextInput&gt;`标签中的`password`属性设置为`true`。 #### 31. 我想让一个button鼠标移动上去变成手型,需要怎么设置? - **答案**:设置`&lt;mx:Button&gt;`标签中的`cursor`属性为`...

    Flex UI组件使用全集

    - **TextInput**: 单行文本输入框组件。 #### Containers(容器组件) - **Application**: 应用程序主容器,通常作为Flex应用的根节点。 - **Accordion**: 可折叠的面板容器。 - **ApplicationControlBar**: 应用...

    Javascript实现一个简单的输入关键字添加标签效果实例

    在JavaScript编程中,实现一个简单的输入关键字添加标签的效果是一个常见的需求,特别是在网页交互设计中,如博客、社交媒体或论坛等。这种效果允许用户输入关键词,然后以标签的形式展示,增加用户体验和信息分类的...

    html5登陆练习

    通过这个API,用户可以直接用鼠标将元素拖动到其他位置。在登录页面中,可能用于调整页面布局或者图标的位置。实现拖放功能需要监听`dragstart`, `drag`, `dragend`等事件,并设置相应的数据传输和效果反馈: ```...

    jQuery左右滑块拖动选取营业时间范围

    在本文中,我们将深入探讨如何使用jQuery实现左右滑块拖动选取营业时间范围的功能。这个功能常见于在线预订系统、预约服务或者任何需要用户自定义时间区间的应用中,提供了直观且用户友好的交互体验。 首先,jQuery...

    基于adobe flash平台的 相片编辑器[as3工程部分] 一

    2. **UI组件**:Flex框架提供了丰富的预定义组件库,如Button、TextInput、Slider等,这些组件可以快速构建用户界面。 3. **图像处理**:项目可能会使用AS3的BitmapData类进行图像操作,例如裁剪、旋转、滤镜效果等...

    一些方案的实现方法js笔记

    使用CSS的`margin: auto`可以水平居中一个固定宽度的元素,垂直居中可以通过`display: flex`或`position: absolute`和`transform`实现。 11. **弹框的拖拽事件**: 实现拖拽功能通常需要监听`mousedown`、`...

    div+css制作表格

    - **数据验证**:例如限制输入类型、长度等。 - **自动填充**:类似Excel中的拖拽填充功能。 - **排序功能**:允许按列对数据进行升序或降序排列。 通过以上步骤,我们可以使用`div+CSS`来创建一个既美观又实用的...

    Web前端+后端+架构 21部从零玩转Web全栈超级架构师 2000集50G容量爆表-学完就够用!

    10. **CSS3样式:**覆盖CSS3新增的样式属性如`border-radius`、`box-shadow`、`text-shadow`等。 11. **响应式布局:**学习使用媒体查询(media queries)实现响应式网页设计。 12. **Flex布局与Grid布局:**理解...

Global site tag (gtag.js) - Google Analytics