10.5.啟動(dòng)和禁止拖操作

2024-04-27 13:52:10

字體：大中小

供稿：網(wǎng)友

10.5.1．問題
你想在運(yùn)行時(shí)啟動(dòng)和禁止列表類控件的拖拽操作。
10.5.2．解決辦法
使用列表類控件的拖拽事件屬性來管理屬性值。
10.5.3 討論
Flex 框架的列表類控件具有內(nèi)置的管理器來與DragManager 互動(dòng)，通過使用dragEnabled和dropEnabled 屬性，提供了一個(gè)便捷的途徑來啟動(dòng)控件響應(yīng)拖拽動(dòng)作。通過使用內(nèi)建的事件屬性dragStart, dragEnter,dragOver, dragExit, dragDrop 和dragComplete，你可以像在任何其它UIComponent 驅(qū)動(dòng)的程序中一樣設(shè)置事件處理器。

為了啟動(dòng)一個(gè)列表類控件接收拖拽動(dòng)作，你可以設(shè)置該控件實(shí)例的dragEnabled 屬性的布爾值。列表類控件具有單向或者雙向的拖拽能力。在一個(gè)單向的體系中，該控件實(shí)例能夠接受釋放動(dòng)作或者允許拽動(dòng)。在雙向體系中，該控件允許拽動(dòng)和釋放動(dòng)作都執(zhí)行。

通過指派DragManager 發(fā)出的拖拽事件的處理器，從而對程序中怎樣處理事件和拖拽源數(shù)據(jù)進(jìn)行管理。下面的例子為dragEnter 事件創(chuàng)建一個(gè)事件處理器，從而決定在兩個(gè)List 控件中是否允許或禁止拖拽動(dòng)作。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
creationComplete="creationHandler();">
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var isEnabled:Boolean = true ;
private static const DIS_LABEL:String = "disable drag and drop";
private static const EN_LABEL:String ="enable drag and drop";
private function creationHandler():void {
list1.dataProvider = new ArrayCollection(['Spider Monkey', 'Orangutan', 'Gorilla']);
list2.dataProvider = new ArrayCollection(['Lion', 'Cheetah', 'Puma'])}
private function clickHandler():void {
enableBtn.label = ( enableBtn.label == DIS_LABEL )? EN_LABEL: DIS_LABEL;
isEnabled = !isEnabled;
}
private function dragEnterHandler( evt:DragEvent ):void{
evt.target.dropEnabled = ( evt.target !=evt.dragInitiator );
}

]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:Button id="enableBtn" label="disable drag and drop" click="clickHandler();" />
<mx:HBox width="100%" height="100%">
<mx:List id="list1" width="200" height="200" dragEnabled="{isEnabled}"
dragMoveEnabled="true" dragEnter="dragEnterHandler(event);" />
<mx:List id="list2" width="200" height="200" dragEnabled="{isEnabled}" dragMoveEnabled="true" dragEnter="dragEnterHandler(event);" />
</mx:HBox>
</mx:VBox>
</mx:Application>