- 浏览: 137064 次
- 性别:
- 来自: 郑州
文章分类
最新评论
-
Ken艹小哲:
太赞了 哥们 加扣
猜数字问题的最少步数算法. -
chenyuan122912:
...
解决AS3 Socket编程中最令人头疼的问题 -
hyx0914:
有源代码打包下载的吗?
Flex地图分块加载的实现 -
tianhai110:
非常有价值的 测试总结
时间效率,Timer和EnterFrame在FP 10.1之后测试和建议 -
763675117:
你好,fengxiangpiao,看了你的文档,我的需求和你差 ...
解决MovieClip打印问题 转
在上一篇中你已经知道Flex中有一些控件内置了对drag-and-drop操作的支持,实现也相对方便,但往往要完成这样的操作,将一幅图片(没有内置drag-and-drop操作)拖动到一个表格中,在表格中显示相关信息,该如何实现呢? 答案很简单,你必须显式的通过一系列专门的类和事件来添加对drag-and-drop的支持。 以下是实现drag-and-drop操作所用到的类和事件, drag-and-drop 类:
类 功能 DragManager 管理 drag-and-drop 操作;例如,它的 doDrag() 方法启动一个拖拽操作。 DragSource 确定并且储存那些被拖拽的数据。它也提供一些附加的拖拽管理功能,例如可以在需要数据时添加侦听器的功能。 DragEvent 响应 drag-and-drop 事件,例如当用户将对象拖拽到一个拖拽目标上时。手动添加 drag-and-drop 支持
drag-and-drop 事件:
事件 |
描述 |
mouseDown and |
mouseDown 事件是当用户通过按住鼠标键来选择一个控件时广播。mouseMove 事件是当鼠标移动时广播。 对于大多数控件,你初始化 drag-and-drop 操作时是通过这两个事件。对于像 Tree 和 Grid 这些含有 dragEnabled 属性的控件,它本身提供了内在的初始化拖拽操作的支持,你不需要使用鼠标事件。 |
dragComplete |
在一个拖拽操作完成时广播,无论当拖拽数据释放到一个释放目标,还是当 drag-and-drop 操作结束并没有进行释放操作。 你可以使用这个事件来进行任意最终的 drag-and-drop 操作清理工作。例如,如果一个用户从一个列表拖拽一个List控件数据项到另一个列表,你可以使用这个侦听器来删除源List控件中的数据项。 |
释放目标可以使用以下的事件: |
|
dragEnter |
当一个拖拽代理从目标外移动到目标上时广播。 一个组件成为一个释放目标必须为这个事件定义一个侦听器。使用侦听器,你可以改变释放目标的外观提供一个可视化的效果以便用户了解到这个组件可以接受拖拽操作,例如,你可以在释放目标周围绘制一个边框,或者使释放目标获得焦点。 |
dragDrop dragDrop |
当鼠标在目标上释放时广播。 你可以使用这个事件添加拖拽数据到目标上。 |
drag-and-drop 过程:
- 一个组件通过以下方法中的一种成为一个 drag-and-drop 初始器:
拥有 dragEnabled 属性的组件(这些组件包括 List,Tree,DataGrid,PrintDataGrid Menu,HorizontalList 以及 TileList):如果 dragEnabled 属性设置为 true,当用户此组件点击移动鼠标时,Flex 自动将其转为初始器。
没有 dragEnabled 属性的组件:对于其他所有的组件,必须接收到用户启动一个拖拽操作的趋势,然后显式的成为一个初始器。代表性地,你使用 mouseMove 或者 mouseDown 事件来启动 drag-and-drop 操作。
-
- 组件创建一个 mx.core.DragSource 类的实例,其中包含要拖拽的数据,并且指定数据的格式。
- 组件调用 mx.managers.DragManager.doDrag() 方法,来初始化 drag-and-drop 操作。
- 当鼠标键一直按住时,用户在程序内部移动鼠标。Flex 在程序中显示拖拽代理图像。
注意 |
当拖拽代理没有在一个释放目标上时释放鼠标将结束 drag-and-drop 操作。Flex 会产生一个 DragComplete 事件于拖拽初始器,并且 DragManager.getFeedback() 方法返回 DragManager.NONE. |
- 如果用户移动拖拽代理到一个 Flex 组件之上,Flex 广播一个 dragEnter 事件到这个准释放目标。这个目标组件必须为 dragEnter 事件定义一个事件侦听器,这样才能成为一个释放目标。
dragEnter 事件侦听器将检查 DragSource 对象以便决定拖拽数据是否是可接受的格式。为了接受释放,事件侦听器调用 DragManager.acceptDragDrop() 方法。
-
- 如果释放目标拒绝释放,释放目标组件的父级链中组件将逐一被检查,来检测是否有可以接受释放数据的组件。
- 如果释放目标或者其父组件中的一个组件可以接受释放,当用户在目标上移动代理时,Flex 广播一个 dragOver 事件。
- 可选地,目标对象可以对 dragOver 事件进行处理。例如,目标可以使用这个事件侦听器来使其自身获得焦点。
- 如果用户放弃在释放目标上释放数据,并且一直没有松开鼠标将拖拽代理移动到释放目标之外,Flex 广播一个 dragExit 事件。释放目标可以处理这个事件,例如去回滚任何在 dragOver 事件侦听器中进行的操作。
- 如故用户在释放目标上松开鼠标,Flex 广播一个 dragDrop 事件。释放目标的 dragDrop 事件侦听器添加拖拽数据到目标中。
- 如果拖拽操作完成,Flex 广播一个 dragComplete 事件。拖拽初始器可以处理这个事件,例如删除从数据提供器(data provider)中删除拖拽数据。
例:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.containers.Canvas;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
private var provider:Array=new Array();
private function doGrag(event:MouseEvent):void{
var dragData:Object={"产品名称":"诺基亚7610","价格":"1650.00"};
var ds:DragSource=new DragSource();
ds.addData(dragData,"myDs");
var cpyImage:Canvas=new Canvas();
cpyImage.width=myImage.width;
cpyImage.height=myImage.height;
cpyImage.setStyle("backgroundImage",myImage.source);
DragManager.doDrag(myImage,ds,event,cpyImage);
}
private function doDragEnter(event:DragEvent):void
{
if (event.dragSource.hasFormat("myDs"))
{
DragManager.acceptDragDrop(myDataGrid);
}
}
private function doDragDrop(event:DragEvent):void
{
var data:Object =event.dragSource.dataForFormat("myDs");
provider.push(data);
myDataGrid.dataProvider=provider;
}
]]>
</mx:Script>
<mx:Image id="myImage" x="55" y="75" source="Nokia_7610.png" mouseMove="doGrag(event)"/>
<mx:DataGrid id="myDataGrid" x="222" y="103" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"/>
</mx:Application>
var cpyImage:Canvas=new Canvas();
cpyImage.width=myImage.width;
cpyImage.height=myImage.height;
cpyImage.setStyle("backgroundImage",myImage.source);
cpyImage是定义了一个图片的拖拽代理,将cpyimage的backgroundImage样式设置为图片的source属性,大小和图片一致。本例中用Canvas控件作为代理控件,Flex中任何可视控件都可作为代理。
写的不好,希望大家能看明白。
发表评论
-
最全的Flex网站
2011-10-15 23:18 722一、国外站点 1.资源 类Adobe Flex 2 ... -
时间效率,Timer和EnterFrame在FP 10.1之后测试和建议
2011-04-23 22:19 1056关于Timer还是EnterFrame的选择,一直是很 ... -
时间效率,Timer 和 EnterFrame 在 FP 10.1 之后测试和建议
2011-04-23 22:16 1059关于Timer还是EnterFrame的选择,一直是很多AS3 ... -
Socket粘包问题
2011-04-22 23:21 1027这些天做类似QQ空间的 ... -
关于Flash Socket通信的安全策略问题的一点心得
2011-04-22 22:36 697昨天做测试的时候遇到 ... -
FLEX入门实例--------FLEX全屏功能实现及右键菜单
2011-03-26 11:58 815FLEX的全屏功能的实现,光写AS还不够,还需要对JS部分做一 ... -
flex中的Text属性
2010-12-08 12:31 871不同于Lable只显示单行文本,Text可以显示多行文本, ... -
Flex跨域问题
2010-11-08 17:55 790From ESRI: The client brow ... -
Flex屏蔽并自定义鼠标右键菜单(转载)
2010-11-08 17:53 877最近手头有个项目需要屏蔽Flex鼠标右键菜单并自定义新的fle ... -
使用 IBM Rational Functional Tester 7.0.1 测试 Flex 应用程序
2010-11-05 21:45 838关于这篇文章必要的信息 这篇文章假定您已经对使用 IBM® ... -
在 Ajax 应用程序中实现实时数据推送
2010-11-05 21:40 666简介 Ajax 技术已经存在了一段时间,开发的动力已经真正开 ... -
使用 Flex 和 Dojo 开发交互式Web应用程序
2010-11-05 21:38 988引言 以用户体验为核 ... -
Flex 应用内存泄露的分析与诊断
2010-11-05 21:36 802引言 Flex 采用 ActionScrip ... -
flex SystemManger
2010-11-05 16:35 689软件编程牛人网 Framework Fundamentals ... -
Flex 不同 application 之间传参数
2010-11-05 16:33 486软件编程牛人网 通过主影片来获得所有子影片的systemma ... -
如何在flash保留小数位
2010-11-04 20:07 823在家上网赚钱更容易 fl ... -
实例讲解Flex3的SharedObject对象用法
2010-11-04 16:01 757在家上网赚钱更容易 Flex中的SharedObj ... -
Flex中12个最基本、最简单但却最有用的函数
2010-11-04 15:54 690在家上网赚钱更容易 No.1 复制内容到剪贴板 S ... -
谈谈Flex中ArrayCollection的复制(克隆)
2010-11-04 15:51 718在家上网赚钱更容易 在Flex的开发过程中,常常会遇到复 ... -
flex中的拖放操作(一)
2010-11-04 15:47 929在家上网赚钱更容易 可视化的开发环境最大的特点是允许你在 ...
相关推荐
而在 Adobe AIR 应用中,由于有更广泛的系统访问权限,可以实现跨应用程序或桌面的拖放操作。 示例中的 `CanvasDD.mxml` 文件很可能是展示如何在一个 Canvas 组件上实现拖放功能的代码实例。`myComponents` 文件夹...
在拖放操作中,数据既可以被移动也可以被复制。 1. **关于移动数据**:当用户将数据从一个位置移动到另一个位置时,原始位置的数据会被删除。 2. **关于拷贝数据**:当用户将数据从一个位置复制到另一个位置时,原始...
`DragManager` 是Flex中全局的拖放管理器,负责处理所有的拖放操作,而`DragSource` 则是定义拖放源的类,它定义了被拖动的数据以及与之相关的视觉效果。 首先,要实现拖放操作,你需要设置一个可拖动的组件。这...
在本文中,我们将详细探讨如何在Flex的Tree组件中实现节点的拖放操作,并且限制可拖动的节点以及拖动的目标位置。 首先,我们需要了解Flex Tree组件的基本用法。Tree组件用于显示层次结构的数据,每个节点代表数据...
- **基本概述**:`DragManager`类是Flex中负责管理所有拖放操作的核心类。该类提供了必要的方法和属性来控制拖放行为,但值得注意的是,它只包含静态的方法和属性,因此不需要也不应该对其进行实例化。 - **拖放...
总的来说,"flex中拖拉拽好实例objecthandles"是一个关于Flex拖放机制的实践案例,特别强调了ObjectHandle组件的使用,这对于开发具有高度交互性的Flex应用来说是非常有价值的。通过分析和学习这个实例,开发者能够...
- `startDrag()`方法:这是启动拖放操作的关键,通常在鼠标按下(mousedown)事件中调用,指定要拖动的元件以及拖动区域。 - `constrainDragToRect()`: 可以限制拖动范围,确保元素只能在特定矩形区域内移动。 - ...
拖放操作主要分为三个阶段:**初始化(Initiation)**、**拖动(Dragging)** 和 **放下(Dropping)**。 1. **初始化(Initiation)**:此阶段始于用户使用鼠标选取一个Flex组件或组件内的一个条目。例如,用户...
3. **定义拖放范围(Drop Target)**:拖放操作还需要一个或多个接受拖动数据的目标。目标组件通常也需要是UIComponent的子类,通过监听`dragEnter`, `dragDrop`, 和 `dragLeave`事件来处理拖放行为。 4. **监听...
在Flex中,拖放操作分为三个主要部分:启动源(DragSource)、目标区域(DropTarget)以及拖放事件。启动源是用户可以开始拖动的组件,目标区域是用户可以放下被拖动对象的地方。Flex提供了一系列的DragManager类和...
Flex中的拖放操作主要依赖于`DragManager`类,它是整个拖放过程的核心。`DragManager`提供了一系列静态方法和属性,用于控制和监控拖放行为。例如,`DragManager.enableDrag()`可以开启拖放功能,而`DragManager....
4. 拖放效果:通过设置`DragManager.acceptDrag()`和`DragManager.dropEffect`,可以控制拖放操作是否被接受,以及拖放时的视觉反馈,如“copy”、“move”等效果。 三、Flex Drag-and-Drop库的扩展和自定义 1. ...
1. **拖放功能**:在Flex中,实现拖放操作主要依赖于`DragManager`和`DropTarget`类。`DragManager`负责管理整个应用程序的拖放行为,而`DropTarget`则定义了可以接受拖放操作的目标对象。在这个例子中,商品图标...
首先,我们需要了解Flex4中的DragManager类,它是实现拖放操作的核心。DragManager提供了开始拖放、监听拖放事件以及处理拖放结果的方法。当用户开始拖动一个对象时,我们可以通过调用DragManager的beginDrag()方法...
你可以使用`DragManager.addData()`方法添加数据到拖放操作中,这样当拖放操作结束时,接收方可以通过`event.data`获取这些数据。这对于实现更复杂的功能,如在不同组件间传输信息非常有用。 4. **DragEffect**:...
在Flex中,实现拖放操作主要依赖于两个主要类:`DragManager`和`DropTarget`。`DragManager`是系统级别的对象,负责管理整个应用程序的拖放行为,而`DropTarget`则定义了可接收拖放操作的目标区域。 1. **...
通过分析项目压缩包中的文件,我们可以深入理解Flex在拖放操作中的实现方式。 首先,`.actionScriptProperties`文件是ActionScript的配置文件,其中包含了关于项目中ActionScript编译器设置的信息,如编译器选项、...
拖放操作在Flex中分为两个主要部分:拖动源(Drag Source)和放置目标(Drop Target)。拖动源是用户开始拖动操作的对象,而放置目标是用户可以放下该对象的目标区域。Flex提供了DragManager类来处理这些操作,并且...
DragManager允许开发者启动、管理和控制拖放操作。在描述中提到的示例中,可能包含了以下关键知识点: 1. **组件的可拖动性**:在Flex中,任何UIComponent或其子类都可以被设置为可拖动。通常,我们需要首先监听...
5. **Flex Component Suite**: Flex框架内含一套丰富的预建UI组件,如按钮、文本输入框、列表、图表等,这些组件可拖放使用,使得快速开发成为可能。 文档中的"Flex中文帮助No4章"可能涉及以下内容: - **数据绑定...