`

flex中的拖放操作(二)

    博客分类:
  • Flex
阅读更多

在家上网赚钱更容易

手动添加 drag-and-drop 支持

在上一篇中你已经知道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 事件:

事件

描述

mouseDown   and 
mouseMove

mouseDown 事件是当用户通过按住鼠标键来选择一个控件时广播。mouseMove 事件是当鼠标移动时广播。

对于大多数控件,你初始化 drag-and-drop 操作时是通过这两个事件。对于像 Tree 和 Grid 这些含有 dragEnabled 属性的控件,它本身提供了内在的初始化拖拽操作的支持,你不需要使用鼠标事件。

dragComplete

在一个拖拽操作完成时广播,无论当拖拽数据释放到一个释放目标,还是当 drag-and-drop 操作结束并没有进行释放操作。

你可以使用这个事件来进行任意最终的 drag-and-drop 操作清理工作。例如,如果一个用户从一个列表拖拽一个List控件数据项到另一个列表,你可以使用这个侦听器来删除源List控件中的数据项。

释放目标可以使用以下的事件:

dragEnter

当一个拖拽代理从目标外移动到目标上时广播。

一个组件成为一个释放目标必须为这个事件定义一个侦听器。使用侦听器,你可以改变释放目标的外观提供一个可视化的效果以便用户了解到这个组件可以接受拖拽操作,例如,你可以在释放目标周围绘制一个边框,或者使释放目标获得焦点。

dragDrop

dragDrop

当鼠标在目标上释放时广播。

你可以使用这个事件添加拖拽数据到目标上。

drag-and-drop 过程:

 

  1. 一个组件通过以下方法中的一种成为一个 drag-and-drop 初始器:

拥有 dragEnabled 属性的组件(这些组件包括 List,Tree,DataGrid,PrintDataGrid Menu,HorizontalList 以及 TileList):如果 dragEnabled 属性设置为 true,当用户此组件点击移动鼠标时,Flex 自动将其转为初始器。

没有 dragEnabled 属性的组件:对于其他所有的组件,必须接收到用户启动一个拖拽操作的趋势,然后显式的成为一个初始器。代表性地,你使用 mouseMove 或者 mouseDown 事件来启动 drag-and-drop 操作。

  1.  
    1. 组件创建一个 mx.core.DragSource 类的实例,其中包含要拖拽的数据,并且指定数据的格式。
    2. 组件调用 mx.managers.DragManager.doDrag() 方法,来初始化 drag-and-drop 操作。
  2. 当鼠标键一直按住时,用户在程序内部移动鼠标。Flex 在程序中显示拖拽代理图像。

注意

当拖拽代理没有在一个释放目标上时释放鼠标将结束 drag-and-drop 操作。Flex 会产生一个 DragComplete 事件于拖拽初始器,并且 DragManager.getFeedback() 方法返回 DragManager.NONE.

  1. 如果用户移动拖拽代理到一个 Flex 组件之上,Flex 广播一个 dragEnter 事件到这个准释放目标。这个目标组件必须为 dragEnter 事件定义一个事件侦听器,这样才能成为一个释放目标。

dragEnter 事件侦听器将检查 DragSource 对象以便决定拖拽数据是否是可接受的格式。为了接受释放,事件侦听器调用 DragManager.acceptDragDrop() 方法。

  1.  
    • 如果释放目标拒绝释放,释放目标组件的父级链中组件将逐一被检查,来检测是否有可以接受释放数据的组件。
    • 如果释放目标或者其父组件中的一个组件可以接受释放,当用户在目标上移动代理时,Flex 广播一个 dragOver 事件。
  2. 可选地,目标对象可以对 dragOver 事件进行处理。例如,目标可以使用这个事件侦听器来使其自身获得焦点。
  3. 如果用户放弃在释放目标上释放数据,并且一直没有松开鼠标将拖拽代理移动到释放目标之外,Flex 广播一个 dragExit 事件。释放目标可以处理这个事件,例如去回滚任何在 dragOver 事件侦听器中进行的操作。
  4. 如故用户在释放目标上松开鼠标,Flex 广播一个 dragDrop 事件。释放目标的 dragDrop 事件侦听器添加拖拽数据到目标中。
  5. 如果拖拽操作完成,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 3 拖放实现

    而在 Adobe AIR 应用中,由于有更广泛的系统访问权限,可以实现跨应用程序或桌面的拖放操作。 示例中的 `CanvasDD.mxml` 文件很可能是展示如何在一个 Canvas 组件上实现拖放功能的代码实例。`myComponents` 文件夹...

    Flex3组件拖放教程

    在拖放操作中,数据既可以被移动也可以被复制。 1. **关于移动数据**:当用户将数据从一个位置移动到另一个位置时,原始位置的数据会被删除。 2. **关于拷贝数据**:当用户将数据从一个位置复制到另一个位置时,原始...

    Flex3+组件拖放教程

    `DragManager` 是Flex中全局的拖放管理器,负责处理所有的拖放操作,而`DragSource` 则是定义拖放源的类,它定义了被拖动的数据以及与之相关的视觉效果。 首先,要实现拖放操作,你需要设置一个可拖动的组件。这...

    flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

    在本文中,我们将详细探讨如何在Flex的Tree组件中实现节点的拖放操作,并且限制可拖动的节点以及拖动的目标位置。 首先,我们需要了解Flex Tree组件的基本用法。Tree组件用于显示层次结构的数据,每个节点代表数据...

    Flex基础培训-6-拖放与过滤

    - **基本概述**:`DragManager`类是Flex中负责管理所有拖放操作的核心类。该类提供了必要的方法和属性来控制拖放行为,但值得注意的是,它只包含静态的方法和属性,因此不需要也不应该对其进行实例化。 - **拖放...

    flex中拖拉拽好实例objecthandles

    总的来说,"flex中拖拉拽好实例objecthandles"是一个关于Flex拖放机制的实践案例,特别强调了ObjectHandle组件的使用,这对于开发具有高度交互性的Flex应用来说是非常有价值的。通过分析和学习这个实例,开发者能够...

    Flex拖拽控件效果

    - `startDrag()`方法:这是启动拖放操作的关键,通常在鼠标按下(mousedown)事件中调用,指定要拖动的元件以及拖动区域。 - `constrainDragToRect()`: 可以限制拖动范围,确保元素只能在特定矩形区域内移动。 - ...

    flex 拖拽功能 中文文档

    拖放操作主要分为三个阶段:**初始化(Initiation)**、**拖动(Dragging)** 和 **放下(Dropping)**。 1. **初始化(Initiation)**:此阶段始于用户使用鼠标选取一个Flex组件或组件内的一个条目。例如,用户...

    flex 拖拽效果程序

    3. **定义拖放范围(Drop Target)**:拖放操作还需要一个或多个接受拖动数据的目标。目标组件通常也需要是UIComponent的子类,通过监听`dragEnter`, `dragDrop`, 和 `dragLeave`事件来处理拖放行为。 4. **监听...

    flex 拖拽的例子

    在Flex中,拖放操作分为三个主要部分:启动源(DragSource)、目标区域(DropTarget)以及拖放事件。启动源是用户可以开始拖动的组件,目标区域是用户可以放下被拖动对象的地方。Flex提供了一系列的DragManager类和...

    Flex关于拖拽编程

    Flex中的拖放操作主要依赖于`DragManager`类,它是整个拖放过程的核心。`DragManager`提供了一系列静态方法和属性,用于控制和监控拖放行为。例如,`DragManager.enableDrag()`可以开启拖放功能,而`DragManager....

    Flex拖拽库flex拖拽库

    4. 拖放效果:通过设置`DragManager.acceptDrag()`和`DragManager.dropEffect`,可以控制拖放操作是否被接受,以及拖放时的视觉反馈,如“copy”、“move”等效果。 三、Flex Drag-and-Drop库的扩展和自定义 1. ...

    flex3一个简单购物车拖拽的例子

    1. **拖放功能**:在Flex中,实现拖放操作主要依赖于`DragManager`和`DropTarget`类。`DragManager`负责管理整个应用程序的拖放行为,而`DropTarget`则定义了可以接受拖放操作的目标对象。在这个例子中,商品图标...

    Flex4实现拖拽功能

    首先,我们需要了解Flex4中的DragManager类,它是实现拖放操作的核心。DragManager提供了开始拖放、监听拖放事件以及处理拖放结果的方法。当用户开始拖动一个对象时,我们可以通过调用DragManager的beginDrag()方法...

    Flex_DragDrop

    你可以使用`DragManager.addData()`方法添加数据到拖放操作中,这样当拖放操作结束时,接收方可以通过`event.data`获取这些数据。这对于实现更复杂的功能,如在不同组件间传输信息非常有用。 4. **DragEffect**:...

    Flex拖动购物车很Cool给大家更多的帮助

    在Flex中,实现拖放操作主要依赖于两个主要类:`DragManager`和`DropTarget`。`DragManager`是系统级别的对象,负责管理整个应用程序的拖放行为,而`DropTarget`则定义了可接收拖放操作的目标区域。 1. **...

    flex DragTile.zip DragTile.zipDragTile.zip

    通过分析项目压缩包中的文件,我们可以深入理解Flex在拖放操作中的实现方式。 首先,`.actionScriptProperties`文件是ActionScript的配置文件,其中包含了关于项目中ActionScript编译器设置的信息,如编译器选项、...

    Flex 拖拽例子 从不同组件间拖拽

    拖放操作在Flex中分为两个主要部分:拖动源(Drag Source)和放置目标(Drop Target)。拖动源是用户开始拖动操作的对象,而放置目标是用户可以放下该对象的目标区域。Flex提供了DragManager类来处理这些操作,并且...

    flex拓扑示例(可以拖动)

    DragManager允许开发者启动、管理和控制拖放操作。在描述中提到的示例中,可能包含了以下关键知识点: 1. **组件的可拖动性**:在Flex中,任何UIComponent或其子类都可以被设置为可拖动。通常,我们需要首先监听...

    Flex中文帮助文档,绝对实用

    5. **Flex Component Suite**: Flex框架内含一套丰富的预建UI组件,如按钮、文本输入框、列表、图表等,这些组件可拖放使用,使得快速开发成为可能。 文档中的"Flex中文帮助No4章"可能涉及以下内容: - **数据绑定...

Global site tag (gtag.js) - Google Analytics