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

Flex控件拖動

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

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

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

 同一個時間內只能有一個Sprite處于拖動狀態(tài)”。也就是說如果想實現(xiàn)某個Flex控件拖動，直接調用startDrag函數(shù)就可以了，結束拖動就調用 stopDrag函數(shù)。最原始的控件拖動思想在Flex中再無用武之地了。然后再簡單提一下stopDarg函數(shù)，因為剛才在介紹startDrag函數(shù) 中已經提到這個函數(shù)的作用了，所以直接把官方說明在說一下：“結束startDarg函數(shù)。在調用stopDrag函數(shù)或者另外一個Sprite被拖動之 前Sprite會保持拖動狀態(tài)。同一個時間內只能有一個Sprite處于拖動狀態(tài)”。

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

下面是實現(xiàn)一個按鈕拖動的例子：

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. 五大方法實現(xiàn)Flex性能優(yōu)化
2. 技術分享 添加FLex右鍵菜單的方法
3. 技術前沿 看Flex客戶端緩存技術如何使用
4. 12個Flex常用功能代碼再現(xiàn)
5. 學習筆記 Flex國際化如何支持其他語言