Anistar RIA Blog

還債的時間又到了，這個示範的緣由是在於其中一個企業包班的班級，問了如何將List的資料"拖曳"到不是List的元件中，當時因為時間不夠解說的原因，於是承諾會將方法寫在Blog上，好，既然答應了，就不能當小木偶，免得鼻子越來越長。

這個示範中，我們用最簡單的元件來呈現，免得程式碼看起來複雜反而不容易看的懂。大家都應該知道在Flex中可以很容易的將List的資料拖曳到List中，只要使用dragEnabled和dropEnabled兩個屬性就行了，但是若是要將List的資料拖曳到非List的元件上，就要動點小手腳了，說穿了，不管是List也好，其他控制項也好，都是透過DragManager這個類別來實現，既然List是用這個類別，那當然只要用DragManager的方法來接收資料就可以了。

這個示範可以讓你從左側的List中拖曳資料到右側的List，或是也可以拖曳到右側的灰色方塊中(這個方塊其實是個HBox)，無論你拖曳到哪裡，都可以將資料複製到右邊的List中，有興趣的人可以玩玩下面這個示範：

重點在於HBox這個元件的寫法，示範程式如下：

好啦，看過這個示範以後就知道如何處理List的資料了吧，沒錯，就是這麼簡單，Flex這些強大的功能還真的節省了我們很多程式撰寫的時間。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="init()">
 
 <mx:Script>
  <![CDATA[
   import mx.controls.List;
   import mx.core.IUIComponent;
   import mx.events.DragEvent;
   import mx.collections.ArrayCollection;
   import mx.managers.DragManager;
   [Bindable]
   private var _listData0:ArrayCollection = new ArrayCollection();
   [Bindable]
   private var _listData1:ArrayCollection = new ArrayCollection();
   
   private function init():void{
    var dataObj:Object;
    for(var i:int=0;i<20;i++){
     dataObj = new Object();
     dataObj.label = "label"+i;
     dataObj.data = "data"+i;
     this._listData0.addItem(dataObj);    }
   }
   private function dragEnterHandler(event:DragEvent):void{
    DragManager.acceptDragDrop(event.target as IUIComponent);
   }
   private function dragDropHandler(event:DragEvent):void{
    var sourceList:List = event.dragInitiator as List;
    this._listData1.addItem(sourceList.selectedItem);
    this.destinationList.selectedIndex = this.destinationList.dataProvider.length-1;
   }
  ]]>
 </mx:Script>
 
 <mx:List id="sourceList" x="10" y="10" width="107" height="160"
  dataProvider="{this._listData0}" dragEnabled="true"/>
 
 <mx:List id="destinationList" x="359" y="10" width="107" height="160"
  dataProvider="{this._listData1}" dropEnabled="true"/>
 <mx:Label x="180.5" y="79" text="由左方將資料拖曳至右方"/>
 <mx:Canvas x="321" y="10" width="30" height="30"
  backgroundColor="gray" dragEnter="dragEnterHandler(event)"
  dragDrop="dragDropHandler(event)"/>
</mx:Application>

後記：最近變身成牛仔了(周杰倫的歌，牛仔很忙 XD)，想要寫寫Blog還真的是要用拼命的，新書也開始在編寫了，到時候密技就都寫在書裡面了，尤其是大家想看的資料庫，我會完整的寫出來給大家看，呼～Anistar又要來做公益了～