`
ynshun
  • 浏览: 91487 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Flex中拖动/拖放,简明教程

    博客分类:
  • Flex
阅读更多

1,关于组件的拖动
flex里边有很多组件支持拖动,如Tree,DataGrid,TileList,Tile等,只要设置相应的属性便可进行拖动管理
这里针对Tree组件举个简单的例子,其它组件类似。
代码如下:

代码:
<mx:XML id="myData"> <data> <item label="ActionScript"> <item label="Flash" /> <item label="Flex" /> </item> <item label="Mirage"> </item> <item label="JavaScript"/> </data> </mx:XML> <mx:XML id="copyData"> <data> <item label="JavaScript"/> </data> </mx:XML> <mx:Tree dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" allowMultipleSelection="true" dataProvider="{myData.item}" labelField="@label" dragDrop="findSource( event )" /> <mx:Tree dropEnabled="true" dataProvider="{copyData.item}" labelField="@label"/>

上面代码中只需设置
dropEnabled="true" //是否可以将被拖动的物体放置进来
dragEnabled="true" //是否可以拖动子元素
dragMoveEnabled="true" //是否只是移动元素,而不是复制元素
allowMultipleSelection="true" //是否可以多项拖动元素

这些属性,该组件便可拖移了,拖移之后相应的数据源 dataProvider 也发生了变化,如顺序等。而且数据相同的两个组件间也可以进行相互拖动。
除了这些还需注意的时如何接受被拖动进来的物体。上面代码中有个事件 dragDrop="findSource( event )"
函数如下:
代码:
private function findSource( e : DragEvent ) : void { var source : Object = e.dragSource.dataForFormat("treeItems"); }

其中source指向的是被拖动的元素,而e.dragSource属DragSource类型的对象。至于"treeItems"字符串,各个组件代表的不同,如DataGrid的是"item"。

2,拖动单个控件

拖动单个物体需要DragEvent,DragSource,DragManager代码如下
代码:
<mx:Canvas y="40" id="cansAccess" backgroundColor="#000000" width="300" height="200" dragDrop="complete(event)" dragEnter="enter(event)"/> <mx:Button id="btnDrag" label="拖动我" mouseDown="doDrag( event )" /> private function doDrag( e : MouseEvent ) : void { var ds : DragSource = new DragSource; ds.addData( {"x" : e.localX, "y" : e.localY},"xy"); DragManager.doDrag(btnDrag,ds,e); // 开始拖动这个物体 btnDrag } private function enter( e :DragEvent ) : void { DragManager.acceptDragDrop( Canvas(e.target) ); // cansAccess 接受被拖进来的物体 } private function complete( e : DragEvent ) : void { var xy : Object = e.dragSource.dataForFormat("xy"); // 获取数据对象 也就是在doDrag函数中写的DragSource对象 btnDrag.x = this.mouseX - xy.x; btnDrag.y = this.mouseY - xy.y; }


3,拖动外部文件
拖动外部文件需要NativeDragEvent,NativeDragManager类。其实用法和上面的DragManager一样,但是往往一个控件既要接受Flex内部被拖进来的控件,还要接受外部拖进来的文件,这时候显得就比较麻烦了。
但是请不要害怕,这里的Clipboard会帮我解决问题。 请看下面的代码:
代码:
<mx:Canvas y="40" id="cansAccess" backgroundColor="#000000" width="300" height="200" dragDrop="complete(event)" nativeDragDrop="nativeComplete(event)" dragEnter="enter(event)" /> <mx:Button id="btnDrag" label="拖动我" mouseDown="doDrag( event )" />

按理来说 当拖动内部控件的时候会触发dragDrop事件,拖动外部文件会触发nativeDragDrop事件,事实上,不管你拖动外部文件还是内部控件都会触发这两个事件。这里我们使用Clipboard来解决这一麻烦,代码如下。
代码:
private function doDrag( e : MouseEvent ) : void { var ds : DragSource = new DragSource; ds.addData( {"x" : e.localX, "y" : e.localY},"xy"); DragManager.doDrag(btnDrag,ds,e); } private function enter( e :DragEvent ) : void { DragManager.acceptDragDrop( Canvas(e.target) ); NativeDragManager.acceptDragDrop(Canvas(e.target)); //使其接受从外部拖进来的文件 } private function complete( e : DragEvent ) : void { /* */ } private function nativeComplete( e : NativeDragEvent ) : void { var filesObj : Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT ) as Array; //获取剪切板上的文件列表 if( filesObj && filesObj.length > 0) //符合这一条件说明是从外部拖文件进来 这里假设处理拖进来的是图片 { for each( var item : File in filesObj ) { switch( item.extension ) { case "jpg": case "bmp": case "gif": var img : Image = new Image; img.source = item.nativePath; cansAccess.addChild( img ); break; } } } else //否则的话是就是在拖动内部的控件 { var xy : Object = e.clipboard.getData(e.clipboard.formats[0]); //还记得doDrag 的时候附加的那个 DragSource 么? //这里因为不能用e.dragSource.dataForFormat("xy")了因为事件不一样, //但我们还是可以用剪切板来取得这个值 btnDrag.x = e.localX - xy.x + cansAccess.x; btnDrag.y = e.localY - xy.y + cansAccess.y; } }

end......

分享到:
评论

相关推荐

    Flex3+组件拖放教程

    Flex3 是Adobe Flash平台的一个版本,它提供了丰富的用户界面组件和强大的数据绑定功能...这个教程“Flex3+组件拖放教程--一路风尘.pdf”很可能会详细解释这些概念,并通过实例代码展示如何在实际项目中运用这些技术。

    Flex3组件拖放教程

    ### Flex3组件拖放教程知识点总结 #### 一、关于组件拖放 拖放功能是Flex3中一种非常实用的功能,它可以实现用户界面元素的直观交互。通过拖放操作,用户能够选择一个对象(例如`List`控件或Flex中的`Image`控件)...

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

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

    Flex 3 拖放实现

    在 Flex 3 中,拖放功能(Drag & Drop)是一种常见且实用的用户交互方式,允许用户通过鼠标操作将一个对象从一处拖动到另一处,常用于文件管理、数据交换等场景。 拖放功能在 Flex 3 中主要由两个核心组件支持:`...

    flex 拖拽功能 中文文档

    Flex中的单个组件不仅可以充当拖动发起者,还可以成为拖放目标,这意味着可以在同一个组件内部移动数据。例如,`List`控件可以同时作为拖动发起者和拖放目标,实现列表项的重新排序。 #### 基于列表控件的拖放应用 ...

    Flex4实现拖拽功能

    在Flex4中,拖放(Drag and Drop,简称DnD)功能是一项强大的交互设计工具,它允许用户通过直观的拖动操作在界面上移动或转移数据。在本主题中,我们将深入探讨如何在Flex4中实现图片的拖放功能,包括两种模式:拖动...

    Flex拖拽库flex拖拽库

    在Flex中,拖拽功能是一项重要的用户界面交互机制,允许用户通过鼠标操作将元素从一个位置移动到另一个位置,提升了用户体验。本篇文章将详细讲解Flex拖拽库的相关知识点。 一、Flex中的拖放(Drag-and-Drop)机制 1...

    francis_flex_C/C++_alivefbc_compiler_

    标题 "francis_flex_C/C++_alivefbc_compiler_" 指示我们讨论的是一款基于 flex 和 yacc 工具构建的 C/C++ 语言编译器,名为 "alivefbc"。这款编译器可能由 Francis 创建,用于解析和编译 C 或 C++ 代码。下面我们将...

    web|FLEX|B/S工作流设计器

    在Flex项目中,bin-debug目录下会包含编译后的SWF文件和相关的元数据,这使得开发者能够在开发环境中进行实时测试和问题排查。 总结来说,这个"web|FLEX|B/S工作流设计器"是一个基于Adobe Flex技术的Web应用程序,...

    flex 拖拽的例子

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

    Flex拖拽控件效果

    通过阅读和分析此文件,我们可以更深入地理解Flex中拖放机制的工作原理,并学习如何在自己的项目中实现类似的功能。 总之,了解和掌握Flex的拖放功能对于开发交互性强的Flex应用至关重要。它涉及到对`DragManager`...

    Flex简明中文教程

    ### Flex简明中文教程知识点概览 #### 一、Flex简介 - **定义与背景**:Flex是由Adobe公司推出的一种用于开发和部署富互联网应用(RIA, Rich Internet Application)的技术平台。它允许开发者使用标准语言(如MXML...

    Flex关于拖拽编程

    在Flex中,拖拽编程是一种常见的交互设计方式,允许用户通过鼠标或其他输入设备将元素从一个位置拖动到另一个位置,常用于数据迁移、组件布局调整或游戏设计等场景。下面我们将详细探讨Flex中的拖拽编程。 1. **...

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

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

    罗克韦尔自动化 Flex I/O 简介.zip

    下面我们将详细探讨Flex I/O的特性、组成、优点以及在实际应用中的使用方法。 1. **Flex I/O系统的特点** - **模块化设计**:Flex I/O允许用户根据需求选择不同的输入和输出模块,轻松添加或移除模块,以适应不同...

    flex中拖拉拽好实例objecthandles

    ObjectHandle是Flex中用于控制拖放行为的一种特殊组件,它可以提供更精确的拖放控制,比如在拖动过程中改变拖动物体的大小、形状或位置。这个实例可能包含一个自定义的ObjectHandle类,该类扩展了基本的Sprite或...

    Flex可以拖拽的panel

    在Flex开发中,"Flex可以拖拽的panel"是一个重要的功能点,它允许用户通过鼠标操作将面板(Panel)在界面上自由移动,提升用户体验,尤其是对于需要自定义布局的应用程序来说,这种交互方式非常实用。下面我们将深入...

    Flex:登录

    这篇博客文章可能详细介绍了如何在Flex项目中构建一个登录界面,处理用户输入,验证身份,并与服务器进行交互。 在Flex中创建登录功能涉及以下几个关键知识点: 1. **MXML和ActionScript**:Flex应用通常由MXML和...

    罗克韦尔自动化FLEX I/O 和FLEX EX选型指南(中文).pdf

    选型指南中提到了FLEX I/O模块在极端环境条件下的性能表现,例如工作温度范围是-40°C至+85°C(-40°F至+185°F),相对湿度高达95%,并且能够承受一定的振动和冲击(如5g@10Hz到50Hz)。这些性能保证了模块在恶劣...

    flex实现的拖拽控件

    在这个场景中,我们关注的是Flex实现的拖拽控件,这是一种交互式UI元素,允许用户通过鼠标操作移动元素,提供了丰富的用户体验。 拖拽功能在Flex中可以通过使用内置的DragManager类和Event类来实现。DragManager类...

Global site tag (gtag.js) - Google Analytics