Flex 中的拖拽操作

Flex 有预定义好的拖拽组件和事件,以帮助开发者实现拖拽操作。下面将介绍实例中用到的知识。

基本组件参数：

dragEnabled：设置组件是否能够支持拖拽操作。

dropEnabled：设置组件是否支持释放操作。

系统方法：

DragManager.showFeedback：接收拖拽的组件显示可接受的系统鼠标图标。

DragManager.acceptDragDrop：用于接收组件显示说明可以接收拖拽过来的数据。

事件：

dragEnter：当一个操作进入到接收组件时由接受组件触发的操作。

dragDrop：当一个操作释放时接收组件所触发的操作。

实例：

<fx:Script>
  <![CDATA[
   import mx.core.UIComponent;
   import mx.events.DragEvent;
   import mx.managers.DragManager;

   protected function list1_dragEnterHandler(event:DragEvent):void
   {
    DragManager.acceptDragDrop( event.target as UIComponent );
    DragManager.showFeedback(DragManager.MOVE);
   }

   protected function targetList_dragDropHandler(event:DragEvent):void
   {
    //处理序列中的其他方法
   }

  ]]>
</fx:Script>

<s:HGroup height="100%" width="100%">
  <s:Panel height="100%" width="215" title="信息列表">
  
   <s:List width="157" height="479" dragEnabled="true" id="dragList">
    <s:ArrayList>
     <fx:String>属性1</fx:String>
     <fx:String>属性2</fx:String>
     <fx:String>属性3</fx:String>
     <fx:String>属性4</fx:String>
     <fx:String>属性5</fx:String>
    </s:ArrayList>
  
   </s:List>
  </s:Panel>
 
  <s:Panel title="选取列表" height="100%" width="239">
 
   <s:List width="113" height="479" dropEnabled="true"
     dragEnter="list1_dragEnterHandler(event)" id="targetList"
        dragDrop="targetList_dragDropHandler(event)"
     >
    <s:ArrayList id="dropList">
    </s:ArrayList>
   
   </s:List>
  </s:Panel>
 
</s:HGroup>

总结：

          实例证明，list用作拖拽操作减少了人工操作的机会。因为他们本身没有提供取消反馈的(hideDropFeedback)以及计算放置位置的方法(calculateDropIndex)，Flex 并没有完善所有组件的拖拽操作。

         对于比较完善的组件，如果要实现不同类型组建的拖拽操作，首先执行event.stopImmediatePropagation()以阻止Flex默认行为，并从event 提取拖拽的数据或者组件的数据源，将数据写入目标组件。目标组件可以用calculateDropIndex 得到释放操作的索引值。