教程 FLEX 005 拖動

2022-03-05 13:23:05 字數 3614 閱讀 5532

在flex中,元件的拖動分為:

1. 加強型(即本身就可以拖動設定是否可以拖動的屬 [dragenabled ,dropenabled ] 即可)

2. 非加強型(可以通過dragmanager,dragevent,dragsource三個類來實現)

3. 那麼拖動就可以分為四種 a.加強型==》加強型、b.加強型==》非加強型、【c.加強型==》非加強型、d.非加強型==》加強型】

4.拖動外部的檔案到面板上(這個目前沒試過)

詳細的拖動教程-->傳送門:

(裡面很詳細)

拖動常用屬性和常用事件

flex元件內建了處理拖拽事件的介面,有些控制項已經實現了拖拽功能,比如list、datagrid、menu、

horizontallist、 printdatagrid、tilelist、tree,在設定相關的拖拽屬性後,它們都可以在相同型別的元件之間利用滑鼠來實現資料的轉移。

allowdragselection           是否可以拖選

allowmultipleselection       是否可以多選

dragenabled                     是否可以拖動子元素

dragmoveenabled              是否移動元素位置,而不是複製元素

dropenabled                     是否可以將物體放置進來

在flex中,有幾個專門的物件供開發者處理拖拽事件:

dragmanager:位於mx.managers包中,管理拖拽事件

dragsource:   位於mx.core包中,是flex框架中的核心成員,處理拖拽中的資料傳遞

dragevent:     位於mx.events包中,拖拽操作中的事件物件。

現在就為舉幾個例子吧(加強型-->加強型、非加強型-->非加強型、加強型-->非加強型)。

一、加強型==》加強型

只要兩個控制項,

乙個設定dragenabled(是否可拖動)屬性,

乙個設定dropenabled(是否可接收拖動過來的元素)

可選屬性【dragmoveenabled:是否只是移動元素,而不是複製元素】

可選屬性【allowmultipleselection:是否可以多項拖動元素,為true時可以用ctrl選多個一起拖動】

就可以拖動了。1.1  如果是同乙個控制項型別之間拖動(list-->list , datagrid-->datagrid)之間,只要簡單的設定屬性即可。

1.2  如果是加強型中不同控制項型別之間拖動(list-->datagrid .....),要記得設定list中的labelfield(繫結的欄位名)datagrid中的datafield(繫結的資料字段)

設定這兩個屬性,主要是在控制項繫結的資料,是物件型別(eg:student類裡面有姓名,年齡等屬性),而不是基本資料型別(eg:string,int,number...)

不設定的話,list會顯示object:object   ,而datagrid則會顯示乙個空行(沒有看到資料)

例子:list-->datagrid 之間的拖動(list繫結的是乙個物件陣列

<?xml version="1.0" encoding="utf-8"?>

//]]>

二、加強型--》非加強型 (通用的,加強型和非加強型都可以用這個實現)

2.1  拖動的幾個步驟:

按照邏輯,拖拽中至少有兩個物件:一方提供資料,一方接收資料。在這個過程中,提供資料的一方按照前後順序,可以把整個過程劃分為下面幾個事件:

拖動方:

mousedown:滑鼠按下。

mousemove:滑鼠移動。

dragcomplate:滑鼠釋放。判斷目標是否接受資料,如果可以,拖放成功。

接收方也將經歷幾個階段:

dragenter:被拖動物件移動到目標範圍中。

dragdrop:滑鼠在目標上鬆開。

dragover:滑鼠移動到目標上。

dragexit:獨享被拖離目標範圍。

2.2  正常拖動使用到的步驟

正常的拖動,只使用到了上個幾個步驟中的三個。(拖動方:mousedown; 接收方:dragenter,dragdrop)

mousedown:拖動方滑鼠點選下的時候,把拖動方設定成可拖動,並且儲存一些想要拖動傳遞的資料。

dragenter:被拖動的物件進入目標範圍中,判斷這個物件是否可以被接收

dragdrop:如果可以被接收的話,則拖動方滑鼠放開的時候,就會觸發這個事件,進行一些處理。

控制項標籤:設定監聽事件(框框中是核心)

三、加強型-->非加強型

在近期公司的flex專案開發中,使用的是這種方法。從左邊tree控制項拖動放到面板容器(canvas)中。

這裡就講一下思路,以及一些核心**

加強型 --> 到非加強型的拖動,和 非加強型-->非加強型不一樣的地方有兩個地方【當然如果不改也是可以的,因為加強型只是flex封裝好了,你可以覆蓋掉】。

1、不需要在寫mousedown事件(-->改為:設定 dragenabled 拖動)

2、當拖動的物件進入目標範圍是,dragenter事件判斷是否可以接收的格式變一下。

是否可以接收

非加強型和非加強型的判斷是否可以接收

他們的差別只是,format變數,乙個是flex封裝好的。所以是寫死的(datagriditems)。乙個是自己寫的,是自己輸入的,可變的。

3、其他都是一樣的。

Flex拖動實現方法

在互動性要求較高的系統中,拖動是一種比較常用的技術,例如,我們經常用到許可權定製 資料匯入匯出定製等功能,這種情況下,一般是目標資料集合已經確定,使用者需要從已有的集合中選擇條目,使用拖動完成實現起來比較直觀,友好 有些場景下需要允許容器內的元素能夠自由拖動,例如一些圖形設計工具。在flex中,它本...

Flex拖動實現方法

在互動性要求較高的系統中,拖動是一種比較常用的技術,例如,我們經常用到許可權定製 資料匯入匯出定製等功能,這種情況下,一般是目標資料集合已經確定,使用者需要從已有的集合中選擇條目,使用拖動完成實現起來比較直觀,友好 有些場景下需要允許容器內的元素能夠自由拖動,例如一些圖形設計工具。在flex中,它本...

Flex拖動實現方法

在互動性要求較高的系統中,拖動是一種比較常用的技術,例如,我們經常用到許可權定製 資料匯入匯出定製等功能,這種情況下,一般是目標資料集合已經確定,使用者需要從已有的集合中選擇條目,使用拖動完成實現起來比較直觀,友好 有些場景下需要允許容器內的元素能夠自由拖動,例如一些圖形設計工具。在flex中,它本...