加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 05:13:12 所属栏目:百科 来源:网络整理
导读:? 参考了网上诸多例子,自己动手写一个简单的例子,以下只针对关键代码做重点讲解。 该例子仅供初学者参考。 ? public ?function?dragImage(e:MouseEvent,?messages:String): void ?? ????????{ ?? ????????????var?dragInitiator:Image=e.currentTarget?as?
?
参考了网上诸多例子,自己动手写一个简单的例子,以下只针对关键代码做重点讲解。
该例子仅供初学者参考。

?
  1. public?function?dragImage(e:MouseEvent,?messages:String):void??
  2. ????????{ ??
  3. ????????????var?dragInitiator:Image=e.currentTarget?as?Image; ??
  4. ????????????var?dragSource:DragSource=new?DragSource(); ??
  5. ????????????dragSource.addData(messages,?"messages");???//?Alias?for?messages ??
  6. ????????????var?dragProxy:Image=new?Image(); ??
  7. ????????????dragProxy.source=e.currentTarget.source; ??
  8. ????????????DragManager.doDrag(dragInitiator,?dragSource,?e,?dragProxy); ??
  9. ????????}??

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

?
  1. var?dragInitiator:Image=e.currentTarget?as?Image;??

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

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

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

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

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

?
  1. DragManager.doDrag(dragInitiator,?dragProxy);??

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

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

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

?
  1. public?function?dragDropHandler(e:DragEvent):void??
  2. ????????{ ??
  3. ????????????var?x:Number=e.localX; ??
  4. ????????????var?y:Number=e.localY; ??
  5. ????????????var?tarImage:Image=e.dragInitiator?as?Image; ??
  6. ????????????tarImage.x=x; ??
  7. ????????????tarImage.y=y; ??
  8. ????????????var?dropTarget:Panel=e.currentTarget?as?Panel; ??
  9. ????????????dropTarget.addChild(tarImage); ??
  10. ????????????var?messages:String=String(e.dragSource.dataForFormat("messages")); ??
  11. ????????????Alert.show(messages); ??
  12. ????????}??

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

?
  1. var?tarImage:Image=e.dragInitiator?as?Image;??

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



有一点需要注意的是,Flex中对对象的引用使用的是 地址引用,所以我们看到这段代码
?
  1. var?dropTarget:Panel=e.currentTarget?as?Panel; ??
  2. 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
  • Test.zip (4.5 MB)
  • 下载次数: 977

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读