`
jaenson
  • 浏览: 189006 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

一个Flex鼠标拖拽图片的简单例子(附源码)

阅读更多
参考了网上诸多例子,自己动手写一个简单的例子,以下只针对关键代码做重点讲解。
该例子仅供初学者参考。

public function dragImage(e:MouseEvent, messages:String):void
		{
			var dragInitiator:Image=e.currentTarget as Image;
			var dragSource:DragSource=new DragSource();
			dragSource.addData(messages, "messages");	// Alias for messages
			var dragProxy:Image=new Image();
			dragProxy.source=e.currentTarget.source;
			DragManager.doDrag(dragInitiator, dragSource, e, dragProxy);
		}

给图片绑定了鼠标左键向下的事件(MouseEvent.MOUSE_DOWN)触发函数dragImage(e:MouseEvent, messages:String),该函数主要实现4个动作:

var dragInitiator:Image=e.currentTarget as Image;

1. 初始化拖动对象dragInitiator,e是当前被触发的事件,e.currentTarget则是事件当前的对象。

var dragSource:DragSource=new DragSource();
dragSource.addData(messages, "messages");

2. 装载数据对象或数据源dragSource,拖动过程中需要传递的信息必须使用DragSource作为载体。双引号里面的“messages”是被传递对象的别名,到了另一端,我们必须根据这个别名来取出数据。

var dragProxy:Image=new Image();
dragProxy.source=e.currentTarget.source;

3. 设置代理对象dragProxy,这个对象可以看成是根据源对象产生的一个副本,可以认为是源对象在目标容器中的“影子”,一个临时的对象。

DragManager.doDrag(dragInitiator, dragSource, e, dragProxy);

4. 将dragInitiator、dragSource、dragProxy,以及鼠标事件e一起提交给DragManager的doDrag方法管理。

public function dragEnterHandler(e:DragEvent):void
		{
			var dropTarget:Panel=e.currentTarget as Panel;	//	Note: 'dropTarget' is the target container where the mouse attempts to release
			DragManager.acceptDragDrop(dropTarget);
		}

这个函数是被拖动的对象进入目标容器时触发的,必须将其绑定给目标容器的dragEnter事件,其中值得注意的是,传给DragManager.acceptDragDrop的dropTarget必须是目标容器。

public function dragDropHandler(e:DragEvent):void
		{
			var x:Number=e.localX;
			var y:Number=e.localY;
			var tarImage:Image=e.dragInitiator as Image;
			tarImage.x=x;
			tarImage.y=y;
			var dropTarget:Panel=e.currentTarget as Panel;
			dropTarget.addChild(tarImage);
			var messages:String=String(e.dragSource.dataForFormat("messages"));
			Alert.show(messages);
		}

同理,这个函数是被拖动的对象进入目标容器后鼠标左键被释放时触发的,必须将其绑定给目标容器的dragDrop事件。

var tarImage:Image=e.dragInitiator as Image;

此时,我们通过将被拖动的对象e.dragInitiator,以及在这过程中用“messages”别名保存起来的字符串拿出来,把它addChild在dropTarget后面,同时设置好被拖动对象的X,Y坐标,我们就实现了图片的拖拽功能。



有一点需要注意的是,Flex中对对象的引用使用的是地址引用,所以我们看到这段代码
var dropTarget:Panel=e.currentTarget as Panel;
dropTarget.addChild(tarImage);

事实上是将整个被拖动对象挂在了目标容器中。
例如,一个数组:
var intArray:Array=new Array("1","2","3","4","5");
var tempArray:Array;
tempArray=intArray;
tempArray.splice(1,1);
trace(intArray);

输出的结果:1,3,4,5
0
6
分享到:
评论

相关推荐

    FlexImage简单相册例子(含源码)

    这个压缩包提供的"FlexImage简单相册例子(含源码)"是一个很好的学习资源,可以帮助开发者理解如何利用FlexImage库来构建功能丰富的图像浏览体验。 首先,FlexImage库的核心特性是其灵活性。它允许开发者自由地...

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

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

    Flex与Javascript相互调用例子(附源码)

    标题 "Flex与Javascript相互调用例子(附源码)" 指涉的是一个技术主题,主要探讨了如何在Adobe Flex应用程序中与JavaScript进行交互。Flex是基于ActionScript 3.0的开源框架,用于构建富互联网应用(RIA),而...

    flex鱼眼显示图片的例子

    这个"flex鱼眼显示图片的例子"是一个Flex项目,它展示了如何使用Flex技术实现一个鱼眼效果的图片显示功能。鱼眼效果通常指的是将图像扭曲成类似鱼眼镜头所拍摄的弧形视野,这种效果在视觉上往往能带来独特的体验。 ...

    FLEX简单的Flex 相册(附源码)

    Flex相册是一个基于Adobe Flex技术开发的多媒体展示应用,它允许用户以美观的方式浏览和管理图像集合。在本文中,我们将深入探讨Flex相册的实现原理、主要组件以及如何进行扩展。 1. Flex简介: Flex是Adobe公司...

    flex 拖拽的例子

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

    flex鼠标拖拽进行截图

    用鼠标拖拽选择要截取的区域,图片格式没有限制,没有和后台交互

    FLEX网站源码 FLEX网站源码 FLEX网站源码

    SDK是免费的,包含编译器、库和工具,而Builder则是一个集成开发环境(IDE),提供了更友好的图形化界面。Flex SDK的核心是ActionScript编程语言和MXML标记语言,它们允许开发者用面向对象的方式编写代码和设计用户...

    FLex例子大全,绝对源码

    这个例子可能展示了Flex中的动画效果,可能是使用了`Slide`或`Fade`效果,或者自定义了动画组件来模拟卷帘门的开启和关闭。Flex的`Animate`类和`Effect`框架允许开发者创建复杂的视觉动画,这些动画可以通过改变...

    flex手工画拓扑图例子源码

    本示例“flex手工画拓扑图例子源码”提供了一个使用Flex开发的拓扑图Demo的早期版本,这对于我们理解如何在Flex环境中手动创建和展示拓扑图具有重要的学习价值。 拓扑图在IT系统中广泛应用于网络、数据流、硬件设备...

    flex鼠标拖动图片

    通过以上步骤,你可以在Flex环境中创建一个可拖动并能在鼠标释放时停止的图片组件。这个功能可以用于各种应用场景,如图像编辑工具、布局设计应用或是任何需要用户自由调整元素位置的场景。记得在实际开发中根据项目...

    flex 控制鼠标移动的例子

    在Flex这个强大的基于ActionScript 3.0的开发框架中,控制鼠标移动是实现交互式应用的一个重要功能。本文将详细讲解如何在Flex项目中实现鼠标移动事件的监听与处理,以及相关的编程技巧。 首先,我们需要理解Flex中...

    记事万年历flex源码

    综上所述,"记事万年历flex源码"是一个展示Flex技术在构建富互联网应用中的实际应用的例子,它融合了UI设计、事件处理、数据绑定和定制组件等多方面的知识。对于想要提升自己在Flex开发技能的开发者来说,这是一个...

    Flex可以拖拽的panel

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

    Flex 五子棋游戏(附源码)

    Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏...

    完全基于FLEX的WEB3D引擎例子源码及教程.rar

    本资料包“完全基于FLEX的WEB3D引擎例子源码及教程”正是针对这一领域的一份宝贵学习资源,旨在帮助开发者掌握如何利用Adobe Flex框架构建高效的Web3D应用。 Adobe Flex是一种用于创建富互联网应用程序(RIA)的...

    Flex 拖拽图片代码

    本文主要解析一份关于Flex 3.0中实现图片拖拽功能的代码。通过详细分析这份代码,可以帮助读者更好地理解Flex中的拖拽机制以及如何在实际项目中应用这一功能。 #### 二、Flex与拖拽功能简介 Flex是一款用于构建高...

    flex 拖拽功能 中文文档

    以下是一个使用Flex的拖放功能将一个`List`控件中的条目移动到另一个`List`控件的简单示例代码: ```xml <!-- dragdrop\SimpleListToListMove.mxml --> creationComplete="initApp();"> <![CDATA[ import mx...

Global site tag (gtag.js) - Google Analytics