如有转载请注明出处,谢谢。
在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
分享到:
相关推荐
这可以通过创建一个`TextInput`组件来实现,让用户输入文字,并且在按下某个按钮时,将文字绘制到绘画板上。 ```xml <s:TextInput id="textInput" width="100%" height="30" /> 添加文字" click="addText()" /> ```...
1. **Flex组件库**:Flex提供了一系列预定义的UI组件,如Button、TextInput、Canvas等,这些组件使得开发者可以快速构建用户界面。在E都市地图源码中,可能会使用Map组件来显示地图,并配合其他组件如Button、Slider...
<mx:TextInput id="password" width="159" height="30" textAlign="left" displayAsPassword="true"/> 登录" x="190" y="118"/> ``` 4. **事件处理**: - 为登录按钮添加事件监听器,处理登录逻辑,例如...
在TextInput及TextArea控件上使用Validator 和Formatter 15.2节. 如何创建一个自定义的Formatter 15.3节. 使用正则表达式创建国际化邮政编码Validator 15.4节. 如何创建一个Validator去验证通用商品代码(UPC) 15.5...
2. **TextInput**: 用于接收用户输入文本的字段,可配置多种属性,如是否允许多行输入、字符限制等。 3. **TextArea**: 类似于TextInput,但支持多行文本输入,常用于长文本编辑。 4. **Label**: 显示静态文本的组件...
对于其他组件,如`TextInput`,可以直接在组件上定义`toolTip`属性并为其创建样式。 7. `HTTPService`组件并不局限于获取XML格式的数据。它可以处理任何类型的响应,包括JSON、文本或二进制数据。只需确保在请求中...
- 在主程序中,可以通过组件浏览器找到自定义的`CLogin`组件,并将其拖拽到设计面板上使用。 - 示例代码如下: ```xml *"> <![CDATA[ import mx.controls.Alert; private function btnClick():void { ...
这些可以通过事件监听器实现,如`Slider`的`change`事件或`TextInput`的`change`事件。 总的来说,使用Flex绘制数学函数图象是一个结合了数学、编程和交互设计的好项目。通过这个过程,初学者可以深入了解Flex的...
- `<s:TextInput id="t2" x="133" y="167" text="{t1.text}"/>` 创建了另一个文本输入框`t2`,其位置坐标为`(133, 167)`,初始显示的文本内容为`t1`文本框中的内容。 #### 5. **水平滑块(HSlider)** ```xml ()" ...
- **答案**:将`<mx:TextInput>`标签中的`password`属性设置为`true`。 #### 31. 我想让一个button鼠标移动上去变成手型,需要怎么设置? - **答案**:设置`<mx:Button>`标签中的`cursor`属性为`...
- **TextInput**: 单行文本输入框组件。 #### Containers(容器组件) - **Application**: 应用程序主容器,通常作为Flex应用的根节点。 - **Accordion**: 可折叠的面板容器。 - **ApplicationControlBar**: 应用...
在JavaScript编程中,实现一个简单的输入关键字添加标签的效果是一个常见的需求,特别是在网页交互设计中,如博客、社交媒体或论坛等。这种效果允许用户输入关键词,然后以标签的形式展示,增加用户体验和信息分类的...
通过这个API,用户可以直接用鼠标将元素拖动到其他位置。在登录页面中,可能用于调整页面布局或者图标的位置。实现拖放功能需要监听`dragstart`, `drag`, `dragend`等事件,并设置相应的数据传输和效果反馈: ```...
在本文中,我们将深入探讨如何使用jQuery实现左右滑块拖动选取营业时间范围的功能。这个功能常见于在线预订系统、预约服务或者任何需要用户自定义时间区间的应用中,提供了直观且用户友好的交互体验。 首先,jQuery...
2. **UI组件**:Flex框架提供了丰富的预定义组件库,如Button、TextInput、Slider等,这些组件可以快速构建用户界面。 3. **图像处理**:项目可能会使用AS3的BitmapData类进行图像操作,例如裁剪、旋转、滤镜效果等...
使用CSS的`margin: auto`可以水平居中一个固定宽度的元素,垂直居中可以通过`display: flex`或`position: absolute`和`transform`实现。 11. **弹框的拖拽事件**: 实现拖拽功能通常需要监听`mousedown`、`...
- **数据验证**:例如限制输入类型、长度等。 - **自动填充**:类似Excel中的拖拽填充功能。 - **排序功能**:允许按列对数据进行升序或降序排列。 通过以上步骤,我们可以使用`div+CSS`来创建一个既美观又实用的...
10. **CSS3样式:**覆盖CSS3新增的样式属性如`border-radius`、`box-shadow`、`text-shadow`等。 11. **响应式布局:**学习使用媒体查询(media queries)实现响应式网页设计。 12. **Flex布局与Grid布局:**理解...