详解Flex控件拖动技术-css 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函数就非常轻松的实现了控件拖动，仅仅只有两行代码。

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

view plaincopy to clipboardprint?  
<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">   
<mx:Button id="btn" mouseDown="startMove(event)" mouseUp="stopMove(event)" label="move"/>   
<mx:Script>   
<!--[CDATA[     
private function startMove(event:Event):void     
{     
Sprite(event.target).startDrag();     
}     
private function stopMove(event:Event):void     
{     
Sprite(event.target).stopDrag();     
}     
]]-->   
</mx:Script>   
</mx:Application>   
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*"> 
<mx:Button id="btn" mouseDown="startMove(event)" mouseUp="stopMove(event)" label="move"/> 
<mx:Script> 
<!--[CDATA[  
private function startMove(event:Event):void  
{  
Sprite(event.target).startDrag();  
}  
private function stopMove(event:Event):void  
{  
Sprite(event.target).stopDrag();  
}  
]]--> 
</mx:Script> 
</mx:Application>

【编辑推荐】