详解Flex控件拖动技术

开发 后端
本文向大家介绍一下Flex控件拖动概念,在程序中如果想实现Flex控件拖动一般的实现思路应该是监听鼠标的按下事件、鼠标的移动事件以及鼠标释放事件。

本文和大家重点讨论一下Flex控件拖动,在程序中如果想实现Flex控件拖动一般的实现思路应该是监听鼠标的按下事件、鼠标的移动事件以及鼠标释放事件。

Flex控件拖动

在程序中如果想实现Flex控件拖动一般的实现思路应该是监听鼠标的按下事件、鼠标的移动事件以及鼠标释放事件。在mousedown的时候做一个 flag,表示鼠标已经按下,并且保存鼠标按下时的坐标。然后再mousemove的时候判断flag是否是鼠标按下状态,得到鼠标的偏移量根据移动的偏 移量调节控件的位置。最后在mouseup事件中将flag还原。

在Flex中这一切变得非常简单,因为Flex在Sprite类中定义了两个函数startDrag()和stopDrag()。大家可能对Sprite 类不太熟悉。的确直接用到这个类的时候确实不多,但是我们对这个类的子类应该是非常熟悉的UIComponent。哈哈,看到重量级的了吧。 UIComponent类可是所有可视控件的鼻祖,也就是说我们能看到的所有的控件都是Sprite的子类。也就意味着所有的可视控件都拥有 startDrag()和stopDrag()这两个函数。

这时候大家要问了,说了这个么半天这两个函数有什么特殊之处呢?这和疯狂有什么联系呢?接下来我来说是这个两个疯狂的函数。首先说startDrag,官 方文档上是这样描述的:“让使用者拖动制定的Sprite,拖动状态会一直保持,直到明确的调用stopDrag函数或者另外一个Sprite开始拖动。

 同一个时间内只能有一个Sprite处于拖动状态”。也就是说如果想实现某个Flex控件拖动,直接调用startDrag函数就可以了,结束拖动就调用 stopDrag函数。最原始的控件拖动思想在Flex中再无用武之地了。然后再简单提一下stopDarg函数,因为刚才在介绍startDrag函数 中已经提到这个函数的作用了,所以直接把官方说明在说一下:“结束startDarg函数。在调用stopDrag函数或者另外一个Sprite被拖动之 前Sprite会保持拖动状态。同一个时间内只能有一个Sprite处于拖动状态”。

最简单的实现方法,在想要拖动的Flex控件的mouseDown事件中调用startDrag函数,然后再控件的mouseUp事件中调用stopDrag函数 就非常轻松的实现了控件拖动,仅仅只有两行代码。

下面是实现一个按钮拖动的例子:

  1. view plaincopy to clipboardprint?  
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">   
  4. <mx:Button id="btn" mouseDown="startMove(event)" mouseUp="stopMove(event)" label="move"/>   
  5. <mx:Script>   
  6. <!--[CDATA[     
  7. private function startMove(event:Event):void     
  8. {     
  9. Sprite(event.target).startDrag();     
  10. }     
  11. private function stopMove(event:Event):void     
  12. {     
  13. Sprite(event.target).stopDrag();     
  14. }     
  15. ]]-->   
  16. </mx:Script>   
  17. </mx:Application>   
  18. <?xml version="1.0" encoding="utf-8"?> 
  19. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*"> 
  20. <mx:Button id="btn" mouseDown="startMove(event)" mouseUp="stopMove(event)" label="move"/> 
  21. <mx:Script> 
  22. <!--[CDATA[  
  23. private function startMove(event:Event):void  
  24. {  
  25. Sprite(event.target).startDrag();  
  26. }  
  27. private function stopMove(event:Event):void  
  28. {  
  29. Sprite(event.target).stopDrag();  
  30. }  
  31. ]]--> 
  32. </mx:Script> 
  33. </mx:Application> 
  34.  

 【编辑推荐】

  1. 五大方法实现Flex性能优化
  2. 技术分享 添加FLex右键菜单的方法
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 12个Flex常用功能代码再现
  5. 学习笔记 Flex国际化如何支持其他语言

 

 
 

责任编辑:佚名 来源: javaeye.com
相关推荐

2010-07-30 09:56:02

Flex控件

2010-08-10 17:13:58

Flex技术

2010-08-12 09:25:35

Flex控件

2010-07-30 10:02:40

Flex验证控件

2010-07-30 10:13:38

Flex控件

2010-08-02 16:00:55

Flex配置

2010-08-05 09:05:14

Flex Button

2010-08-09 09:09:43

Flex技术

2010-07-27 14:58:02

Flex ArrayC

2009-07-15 11:20:05

MyEclipse F

2010-08-06 14:13:31

FlexDataGrid分页控

2010-08-09 13:25:02

FlexSilverlight

2009-06-16 15:25:17

SilverlightJavaFXFlex

2009-09-01 10:35:59

C# WinForm控

2010-08-09 15:41:13

Flex字体

2010-08-12 13:59:37

FlexList控件

2010-07-27 10:19:28

Flex

2010-08-06 15:11:44

Flex界面控件

2010-07-27 14:00:53

Flex ComboB

2010-07-28 12:41:18

Flex组件
点赞
收藏

51CTO技术栈公众号