Flex拖動實現方法

2021-06-28 02:19:08 字數 4483 閱讀 3251

在互動性要求較高的系統中,拖動是一種比較常用的技術,例如,我們經常用到許可權定製、資料匯入匯出定製等功能,這種情況下,一般是目標資料集合已經確定,使用者需要從已有的集合中選擇條目,使用拖動完成實現起來比較直觀,友好;有些場景下需要允許容器內的元素能夠自由拖動,例如一些圖形設計工具。在flex中,它本身就提供了很多支援拖動的特性,很多情況下,這些特性能夠簡化我們的開發,但是也有一些情況是需要我們自定義實現的。本文介紹了三種flex中進行拖動的方法。

方法一:list中資料的拖動

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

dragenabled="true" width="162" labelfield="name">

name="item a"/>

name="item b"/>

name="item c"/>

dropenabled="true" x="196" y="0" width="171" labelfield="name">

通過指定list的dragenabled=true來允許list控制項資料支援拖動,指定dropenabled=true來允許list控制項支援接受拖動資料。

方法二:容器中控制項的拖動

這種方式下控制項的拖動有兩種方法,一種是利用flex自身的實現,一種是使用自定義的實現。對於flex內的所有可視控制項,都支援startdrag()和stopdrag()方法,我們通過定製相應的事件即可完成拖動的操作。例如:

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

importmx.core.uicomponent;

privatefunctionstart(e:mouseevent):void

privatefunctionstop(e:mouseevent):void

]]>

x="0" y="0" width="100%" height="100%">

x="237" y="69" label="button" mousedown="start(event)" mouseup="stop(event)"/>

x="424" y="49" label="checkbox" mousedown="start(event)" mouseup="stop(event)"/>

x="344" y="138" mousedown="start(event)" mouseup="stop(event)"/>

x="267" y="233" text="label" mousedown="start(event)" mouseup="stop(event)"/>

x="412" y="196" mousedown="start(event)" mouseup="stop(event)"/>

第二種方法就是自定義拖動的實現,主要的原理就是:在控制項mousedown之後,給所處的container註冊mousemove和mouseup事件及處理函式;mousemove的時候計算滑鼠移動的值,然後將控制項座標做相應的改變,mouseup的時候移除mousemove和mouseup處理函式。

**如下:

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

importflowdesigner.activitynode;

importui.action.objecthandles;

privatevarmousedownposition:point=null;

privatefunctioninit():void

publicfunctioncomponentmousedownhandler(e:mouseevent):void

publicfunctioncontainermousemovehandler(e:mouseevent):void

publicfunctioncontainermouseuphandler(e:mouseevent):void

]]>

id="container" width="100%" height="100%" backgroundcolor="#fffdfd">

id="todrag" width="121" height="82" backgroundcolor="#ba8080"/>

init中給需要拖動的控制項註冊mousedown處理函式;滑鼠按下的時候給容器註冊mousemove和mouseup處理函式,同時記錄初始座標值;mousemove的時候,將當前事件座標值和原始座標值分別轉換為容器中相對座標值,然後計算x、y座標軸上的相對移動距離,最後設定控制項座標值;mouseup時取消相應的事件處理。

方法三:自定義拖動

這種方式一般能夠滿足大多數的情景,通過dragmanager自己實現dragenter,dragdrop事件來完成拖動功能。

dragmanager 類管理拖放操作。當使用者使用滑鼠選擇某個專案時,所選元件稱為拖動啟動器。拖動操作期間顯示的影象稱為拖動**。當使用者將拖動**移動到其它元件時,系統會向該元件傳送 dragenter 事件。如果該元件接受拖動,即可成為拖放目標,並接收 dragover、dragexit 和 dragdrop 事件。拖動操作完成後,會向拖動啟動器傳送 dragcomplete 事件。dragsource 類中包含正被拖動的資料。

**如下:

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

importmx.containers.canvas;

importmx.core.dragsource;

importmx.managers.dragmanager;

importmx.controls.image;

importmx.events.dragevent;

privatefunctionbegindrag(e:mouseevent):void

privatefunctionacceptdrag(e:dragevent):void

privatefunctioncompletedrag(e:dragevent):void);

img.addeventlistener(mouseevent.mouse_up,function(e:mouseevent):void);

varcontainer:canvas=e.currenttargetascanvas;

container.addchild(img);

}]]>

x="56" y="61" width="520" height="435">

width="100%" height="40" x="20" y="50">

source="assets/test.gif" mousedown="begindrag(event)" width="23" height="19" x="10" y="11"/>

width="448" height="358" dragenter="acceptdrag(event)" dragdrop="completedrag(event)" bordercolor="#39749d" borderstyle="solid" backgroundcolor="#ede5e5">

首先,我們對需要拖動的物件增加mousedown處理函式,本例中是對image物件進行拖動,mousedown中首先獲取當前事件物件,然後建立乙個副本,同時將該副本作為拖動源,通過dragmanager開始拖動;對於接受拖動物件的容器dragenter時通過dragmanager.acceptdragdrop來指定該容器可接受拖動物件,最後在接受拖動物件容器的dragdrop事件處理函式中進行拖動完成的相關處理,本例中是向容器中增加圖形。

Flex拖動實現方法

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

Flex拖動實現方法

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

flex的tree之間拖動

tree的xml內容 var company xml treelabel,在tree控制項的屬性中指定,可以根據解析xml的內容顯示所需節點 private function treelabel item object string 繫結tree的dataprovider bindable var ...