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

flex3中实现拖放

阅读更多

在flex3中实现拖放有两种三种方法:
一、使用dragEnabled
二、使用startDrag与stopDrag
三、使用DragManager。

第一种,这是局部的,对于部分flex组件如Tree等,可以直接设置其dragEnabled属性为true。

第二种,也很简单,且比较通用。主要代码如下:

    private function initializeHandler(event : FlexEvent) : void
    {
         addEventListener(MouseEvent.MOUSE_DOWN, startDragHandler);
    }

 

    private function startDragHandler(event : MouseEvent) : void
    {
        addEventListener(MouseEvent.MOUSE_UP, stopDragHandler);

        this.startDrag();
    }

    private function stopDragHandler(event : MouseEvent) : void
   {
        removeEventListener(MouseEvent.MOUSE_UP, stopDragHandler);

        this.stopDrag();
    }

第三种,使用DragManager。这是实现拖动操作最方便的方法。使用过wordpress的人朋友,都了解它的widgets编辑功能,着实不错,在flex里也可以模仿它实现。WidgetBase只是作为一个示例,并未实现任何逻辑。

效果页面:http://blog.sban.com.cn/flex/WidgetManager/WidgetManageExample.html
源码在线:http://blog.sban.com.cn/flex/WidgetManager/srcview/index.html
源码下载:http://blog.sban.com.cn/flex/WidgetManager/srcview/HistoryManagment.zip

示例说明:
1、上面有三个dragEnabled Label,这三个Label是用本文第二种方法实现的一个DragableLabel自定义组件。三个Label因为其布局格式不同,拖动效果也不同。

2、Label下面,便是widget管理。这是一个培训示例。用户可以直接从左边框里拖动widget到右边框里,左边为未激活的widget,右边为已选用的,并且右边的widget通过拖动可以上下排序。

源码解读:
1、首先程序自定义了一个IWidget接口,不明白接口是什么的趁早回家卖红薯。因为DragManager的拖动对象是  IUIComponent,所以继承于它。

  function get isFolded() : Boolean;

 

  function get isActivated() : Boolean;

  function set isActivated(value : Boolean) : void;

  function fold() : void;

  function unfold() : void;

2、WidgetBase实现IWidget,做为Widget的基类。在实际项目中,Widget是各不相同的,继承于WidgetBase,在子类中实现各自的特性。WidgetBase的实现也很简单。

3、WidgetManageExample该文件不再罗唆,请自行查看源码。

    本示例只为培训演示所用,旨在帮助学员理解DragManager的使用。在学习本示例之前,请先了解关于State的知识。示例代码,不适合直接商用。如果用于项目,须再一些修改。

分享到:
评论

相关推荐

    Flex3+组件拖放教程

    首先,要实现拖放操作,你需要设置一个可拖动的组件。这通常是在组件的初始化代码中完成的,通过调用`setDragEnabled(true)`方法来启用组件的拖动功能。同时,需要指定拖动开始时的源数据,这可以通过创建一个`...

    Flex 3 拖放实现

    示例中的 `CanvasDD.mxml` 文件很可能是展示如何在一个 Canvas 组件上实现拖放功能的代码实例。`myComponents` 文件夹可能包含了一些自定义组件,它们可能扩展了 Flex 基础组件并实现了拖放功能。 在实际应用中,你...

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

    在Flex3中,你可以创建具有丰富用户界面和交互功能的应用程序,而“flex3一个简单购物车拖拽的例子”是一个演示如何在Flex环境中实现拖放功能的实例。这个例子展示了如何将商品图标或项拖入数据网格(DataGrid)中,...

    Flex3组件拖放教程

    需要注意的是,在AIR环境中实现拖放可能需要特殊的考虑,例如处理跨平台兼容性问题。 #### 十二、拖放实例 1. **例子1:用Canvas作为drop target**:演示如何使用`Canvas`作为接收拖放操作的目标。 2. **例子2:...

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

    1. **实现拖放功能**: - 首先,我们需要在Tree组件上启用dragDrop事件监听器,这允许用户在界面上拖动节点。 - 使用beginDrag()方法启动拖动操作,当用户按下鼠标并移动一定距离时,这个方法会被调用。 - 实现...

    flex中拖拉拽好实例objecthandles

    AIR允许Flex应用程序运行在桌面环境,这意味着实例可能展示了如何在桌面环境中实现拖放功能,可能包括与桌面文件系统的交互。 在提供的文件列表"com"中,可能包含了实现上述功能的相关类文件。这些文件可能包含...

    Flex4实现拖拽功能

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

    Flex_DragDrop

    标题"Flex_DragDrop"表明我们将讨论如何在Flex环境中实现拖放功能,特别是针对图片组件的实例。描述中提到提供了Flex中图片组件的拖放实现实例源码,并暗示后续会有更多关于表格数据等其他组件的拖放示例。 Flex是...

    flex 拖拽的例子

    在本文中,我们将深入探讨如何在Flex环境中实现拖放(Drag & Drop)功能,这是一个非常实用的用户交互设计。Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。拖放功能在Flex应用中...

    Flex3学习指南-是初学者学习Flex必备资料1

    这是Flex实现动态UI的关键特性。 7. **事件处理**:在Flex中,事件驱动编程是常见的模式,用户与UI交互时产生的事件可以被捕捉并处理,以实现交互逻辑。 8. **Services和Remoting**:Flex支持与服务器端进行数据...

    Flex 4.5 实现tree拖拽到任意组建

    Flex 4.5中的`DragManager`和`DropTarget`是实现拖放操作的核心类。`DragManager`负责整个拖放过程的管理,包括启动拖放、跟踪鼠标移动和处理释放事件等。而`DropTarget`则定义了接收拖放操作的目标区域及其行为。 ...

    flex4.6拖拽

    3. 实现拖放 - 创建`DragSource`: 首先,你需要创建一个`DragSource`对象,并关联到你想让其可拖动的组件。设置`DragSource`的数据和拖动效果。 ```actionscript var dragSource:DragSource = new DragSource()...

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

    Flex框架同样支持这种直观的操作模式,其核心实现机制依赖于`DragManager`类。 #### `DragManager`类介绍 - **基本概述**:`DragManager`类是Flex中负责管理所有拖放操作的核心类。该类提供了必要的方法和属性来...

    Flex拖拽库flex拖拽库

    1. 拖放事件模型:在Flex中,实现拖放功能涉及一系列的事件,包括`dragStart`、`drop`、`dragEnter`、`dragLeave`、`dragOver`和`dragDrop`等。这些事件使得开发者可以精确地控制拖放过程中的各个阶段,例如决定何时...

    flex 拖拽效果程序

    在本文中,我们将深入探讨如何在Flex环境中实现拖放(Drag and Drop)效果,这是基于Adobe Flex的一个关键交互功能。Flex是一种开源的、基于ActionScript的框架,用于构建富互联网应用程序(RIA)。拖放功能使得用户...

    flex 拖拽功能 中文文档

    Flex框架提供了一套强大的机制用于实现拖放(drag and drop)功能,这在用户界面设计中极为常见,特别是在构建高度交互性的应用时。本文旨在深入探讨Flex中的拖拽功能,包括其工作原理、关键概念、以及如何在实际...

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

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

    Flex拖拽控件效果

    在Flex中,实现拖放(Drag and Drop)功能主要涉及两个核心类:`DragManager`和`DragInitiator`。`DragManager`是系统级别的服务,负责管理整个应用的拖放操作,而`DragInitiator`通常是一个可拖动的UI组件,如...

    拖拽像册flex源码

    2. **DragManager类**:在Flex中,实现拖放功能主要依赖于`DragManager`类。`DragManager`是全局单例,负责整个应用的拖放行为管理。开发者可以通过它启动和监控拖放操作。 3. **DragSource和DropTarget**:拖放...

    flex builder 3 plugin part6

    10. **持续集成**:通过与其他构建工具(如Ant或Maven)的配合,Flex Builder 3可融入到持续集成流程中,实现自动化测试和部署。 以上内容仅是Flex Builder 3插件第六部分的核心知识点,实际开发过程中还会涉及到更...

Global site tag (gtag.js) - Google Analytics