Flex拖動實現方法

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

相關推薦