参考了网上诸多例子,自己动手写一个简单的例子,以下只针对关键代码做重点讲解。
该例子仅供初学者参考。
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
分享到:
相关推荐
这个压缩包提供的"FlexImage简单相册例子(含源码)"是一个很好的学习资源,可以帮助开发者理解如何利用FlexImage库来构建功能丰富的图像浏览体验。 首先,FlexImage库的核心特性是其灵活性。它允许开发者自由地...
在Flex3中,你可以创建具有丰富用户界面和交互功能的应用程序,而“flex3一个简单购物车拖拽的例子”是一个演示如何在Flex环境中实现拖放功能的实例。这个例子展示了如何将商品图标或项拖入数据网格(DataGrid)中,...
标题 "Flex与Javascript相互调用例子(附源码)" 指涉的是一个技术主题,主要探讨了如何在Adobe Flex应用程序中与JavaScript进行交互。Flex是基于ActionScript 3.0的开源框架,用于构建富互联网应用(RIA),而...
这个"flex鱼眼显示图片的例子"是一个Flex项目,它展示了如何使用Flex技术实现一个鱼眼效果的图片显示功能。鱼眼效果通常指的是将图像扭曲成类似鱼眼镜头所拍摄的弧形视野,这种效果在视觉上往往能带来独特的体验。 ...
Flex相册是一个基于Adobe Flex技术开发的多媒体展示应用,它允许用户以美观的方式浏览和管理图像集合。在本文中,我们将深入探讨Flex相册的实现原理、主要组件以及如何进行扩展。 1. Flex简介: Flex是Adobe公司...
在本文中,我们将深入探讨如何在Flex环境中实现拖放(Drag & Drop)功能,这是一个非常实用的用户交互设计。Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。拖放功能在Flex应用中...
用鼠标拖拽选择要截取的区域,图片格式没有限制,没有和后台交互
SDK是免费的,包含编译器、库和工具,而Builder则是一个集成开发环境(IDE),提供了更友好的图形化界面。Flex SDK的核心是ActionScript编程语言和MXML标记语言,它们允许开发者用面向对象的方式编写代码和设计用户...
这个例子可能展示了Flex中的动画效果,可能是使用了`Slide`或`Fade`效果,或者自定义了动画组件来模拟卷帘门的开启和关闭。Flex的`Animate`类和`Effect`框架允许开发者创建复杂的视觉动画,这些动画可以通过改变...
本示例“flex手工画拓扑图例子源码”提供了一个使用Flex开发的拓扑图Demo的早期版本,这对于我们理解如何在Flex环境中手动创建和展示拓扑图具有重要的学习价值。 拓扑图在IT系统中广泛应用于网络、数据流、硬件设备...
通过以上步骤,你可以在Flex环境中创建一个可拖动并能在鼠标释放时停止的图片组件。这个功能可以用于各种应用场景,如图像编辑工具、布局设计应用或是任何需要用户自由调整元素位置的场景。记得在实际开发中根据项目...
在Flex这个强大的基于ActionScript 3.0的开发框架中,控制鼠标移动是实现交互式应用的一个重要功能。本文将详细讲解如何在Flex项目中实现鼠标移动事件的监听与处理,以及相关的编程技巧。 首先,我们需要理解Flex中...
综上所述,"记事万年历flex源码"是一个展示Flex技术在构建富互联网应用中的实际应用的例子,它融合了UI设计、事件处理、数据绑定和定制组件等多方面的知识。对于想要提升自己在Flex开发技能的开发者来说,这是一个...
在Flex开发中,"Flex可以拖拽的panel"是一个重要的功能点,它允许用户通过鼠标操作将面板(Panel)在界面上自由移动,提升用户体验,尤其是对于需要自定义布局的应用程序来说,这种交互方式非常实用。下面我们将深入...
Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏(附源码)Flex 五子棋游戏...
本资料包“完全基于FLEX的WEB3D引擎例子源码及教程”正是针对这一领域的一份宝贵学习资源,旨在帮助开发者掌握如何利用Adobe Flex框架构建高效的Web3D应用。 Adobe Flex是一种用于创建富互联网应用程序(RIA)的...
本文主要解析一份关于Flex 3.0中实现图片拖拽功能的代码。通过详细分析这份代码,可以帮助读者更好地理解Flex中的拖拽机制以及如何在实际项目中应用这一功能。 #### 二、Flex与拖拽功能简介 Flex是一款用于构建高...
以下是一个使用Flex的拖放功能将一个`List`控件中的条目移动到另一个`List`控件的简单示例代码: ```xml <!-- dragdrop\SimpleListToListMove.mxml --> creationComplete="initApp();"> <![CDATA[ import mx...