本文和大家重點(diǎn)討論一下Flex控件拖動(dòng)，在程序中如果想實(shí)現(xiàn)Flex控件拖動(dòng)一般的實(shí)現(xiàn)思路應(yīng)該是監(jiān)聽鼠標(biāo)的按下事件、鼠標(biāo)的移動(dòng)事件以及鼠標(biāo)釋放事件。

Flex控件拖動(dòng)

在程序中如果想實(shí)現(xiàn)Flex控件拖動(dòng)一般的實(shí)現(xiàn)思路應(yīng)該是監(jiān)聽鼠標(biāo)的按下事件、鼠標(biāo)的移動(dòng)事件以及鼠標(biāo)釋放事件。在mousedown的時(shí)候做一個(gè) flag，表示鼠標(biāo)已經(jīng)按下，并且保存鼠標(biāo)按下時(shí)的坐標(biāo)。然后再mousemove的時(shí)候判斷flag是否是鼠標(biāo)按下狀態(tài)，得到鼠標(biāo)的偏移量根據(jù)移動(dòng)的偏 移量調(diào)節(jié)控件的位置。最后在mouseup事件中將flag還原。

在Flex中這一切變得非常簡(jiǎn)單，因?yàn)镕lex在Sprite類中定義了兩個(gè)函數(shù)startDrag()和stopDrag()。大家可能對(duì)Sprite 類不太熟悉。的確直接用到這個(gè)類的時(shí)候確實(shí)不多，但是我們對(duì)這個(gè)類的子類應(yīng)該是非常熟悉的UIComponent。哈哈，看到重量級(jí)的了吧。 UIComponent類可是所有可視控件的鼻祖，也就是說我們能看到的所有的控件都是Sprite的子類。也就意味著所有的可視控件都擁有 startDrag()和stopDrag()這兩個(gè)函數(shù)。

這時(shí)候大家要問了，說了這個(gè)么半天這兩個(gè)函數(shù)有什么特殊之處呢？這和瘋狂有什么聯(lián)系呢？接下來我來說是這個(gè)兩個(gè)瘋狂的函數(shù)。首先說startDrag，官 方文檔上是這樣描述的：“讓使用者拖動(dòng)制定的Sprite，拖動(dòng)狀態(tài)會(huì)一直保持，直到明確的調(diào)用stopDrag函數(shù)或者另外一個(gè)Sprite開始拖動(dòng)。

 同一個(gè)時(shí)間內(nèi)只能有一個(gè)Sprite處于拖動(dòng)狀態(tài)”。也就是說如果想實(shí)現(xiàn)某個(gè)Flex控件拖動(dòng)，直接調(diào)用startDrag函數(shù)就可以了，結(jié)束拖動(dòng)就調(diào)用 stopDrag函數(shù)。最原始的控件拖動(dòng)思想在Flex中再無用武之地了。然后再簡(jiǎn)單提一下stopDarg函數(shù)，因?yàn)閯偛旁诮榻BstartDrag函數(shù) 中已經(jīng)提到這個(gè)函數(shù)的作用了，所以直接把官方說明在說一下：“結(jié)束startDarg函數(shù)。在調(diào)用stopDrag函數(shù)或者另外一個(gè)Sprite被拖動(dòng)之 前Sprite會(huì)保持拖動(dòng)狀態(tài)。同一個(gè)時(shí)間內(nèi)只能有一個(gè)Sprite處于拖動(dòng)狀態(tài)”。

最簡(jiǎn)單的實(shí)現(xiàn)方法，在想要拖動(dòng)的Flex控件的mouseDown事件中調(diào)用startDrag函數(shù)，然后再控件的mouseUp事件中調(diào)用stopDrag函數(shù) 就非常輕松的實(shí)現(xiàn)了控件拖動(dòng)，僅僅只有兩行代碼。

下面是實(shí)現(xiàn)一個(gè)按鈕拖動(dòng)的例子：

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> 
 

 【編輯推薦】

1. 五大方法實(shí)現(xiàn)Flex性能優(yōu)化
2. 技術(shù)分享 添加FLex右鍵菜單的方法
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 12個(gè)Flex常用功能代碼再現(xiàn)
5. 學(xué)習(xí)筆記 Flex國(guó)際化如何支持其他語言