flex拖拽实例

Flex 拖拽

2011-03-11 22:40

前言
Flex 框架的拖拽能力允许用户可视化地从一个地方移动数据到另一个地方，这大大增强了 富互联网应用程序的体验性。任何扩展了 mx.core.UIComponent 类的组件都支持拖拽。在一个拖拽操作中，有一个初始方(initiator) 和一个接收方(receiver) 。任何一个 UIComponent 的实例都能接受由拖拽动作初始的释放操作。一些列表类的Flex 组件，如 List 、 Tree 和 DataGrid ，具有管理拖拽操作的内置支持。这实现了从一个地方移动数据到另一个地方和组件本身的过程的自动化。我们这里要讨论的是一个没有内置自动化拖拽组件的实现拖拽的过程。

相关概念
DragManager
位于 mx.managers 包中， DragManager 类用于管理在你的程序里执行的拖拽操作。

DragSource
位于 mx.core 包中，是 Flex 框架中的核心成员，处理拖拽中的数据传递

DragEvent
位于 mx.events 包中，拖拽操作中的事件对象。

按照逻辑，拖拽中至少有两个对象：一方提供数据，一方接收数据。

 

提供数据
mouseDown       鼠标按下。

mouseMove        鼠标移动。

dragComplete     鼠标释放。判断目标是否接受数据，如果可以，拖放成功。

接收方阶段
dragEnter         被拖动对象移动到目标范围中。

dragDrop          鼠标在目标上松开。

dragOver          鼠标移动到目标上。

dragExit            独享被拖离目标范围。

 

基本流程
1.       在数据提供方监听鼠标事件

a)         初始化 DragSource ，把需要传递的数据使用 addData 的方式添加进 DragSource

b)         把拖拽源和 DragSource 通过静态方法 doDrag 增加到 DragManager 。

2.       监听目标组件的 dragEnter 事件

a)         判断 DragSource 与释放目标的 format 是否一致

b)         如果 format 类型一致则使用 DragManager 的静态方法 acceptDragDrop 允许目标组件接收拖拽。

3.       监听目标组件的 dragDrop 事件

a)         取得拖拽时 DragSource 中的数据，进行操作。

下面是一个很简单的小例子：

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="450" height="350" creationComplete="initApp()" backgroundColor="#FFFFFF" fontSize="12"> 
<mx:Script>
  <![CDATA[
    private function initApp():void{
      words.dataProvider=['Water','水','Car','汽车','House','房屋','Book','书籍','Music','音乐','Sandwich','三明治'];
      english.dataProvider=[];
      chinese.dataProvider=[];
    }
  ]]>
</mx:Script>
  <mx:Panel x="0" y="0" width="450" height="350" layout="absolute" title="Sort Words By Language">
    <mx:Label x="7" y="3" text="Drag to Correct Language"/>
    <mx:List x="7" y="25" id="words" width="200" height="275" allowMultipleSelection="true" dragEnabled="true"></mx:List>
    <mx:Label x="223" y="6" text="English"/>
    <mx:List x="223" y="25" id="english" width="200" height="120" dropEnabled="true"></mx:List>
    <mx:Label x="223" y="150" text="中文"/>
    <mx:List x="223" y="177" id="chinese" width="200" height="120" dropEnabled="true"></mx:List>
  </mx:Panel>
</mx:Application>

但是，拖拽管理器还能定制化到特定的控件之上，比如Image，Datagrid等，下面则是一个定制化的例子：

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400" backgroundColor="#FFFFFF" creationComplete="initApp()" layout="absolute">
  <mx:Script>
    <![CDATA[
      import mx.controls.DataGrid;
      import mx.controls.Image;
      import mx.collections.ArrayCollection;
      import mx.events.DragEvent;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      [Bindable]
      public var total:Number=0;
      [Bindable]
      public var cartContents:ArrayCollection;
      private function initApp():void{
        this.cartContents=new ArrayCollection();
      }
      private function dragIt(event:MouseEvent,name:String,price:Number):void{
        //CurrentTarget指定要实现拖拽事件的初始化目标
        var dragInitiator:Image=event.currentTarget as Image;
        //指定一个dragSource来包括拖拽过程中包含的数据的对象
        var dragSource:DragSource=new DragSource();
        //向对象添加数据
        dragSource.addData(name,'name');
        dragSource.addData(price,'price');
        //创建一个拖拽对象的代理作为拷贝
        var dragProxy:Image=new Image();
        dragProxy.source=event.currentTarget.source;
        //使用DragManager静态方法doDrag开始拖拽
        DragManager.doDrag(dragInitiator,dragSource,event,dragProxy);
      }
      private function dragEnterHandler(event:DragEvent):void{
        var dropTarget:DataGrid=event.currentTarget as DataGrid;
        if (event.dragSource.hasFormat('name') && event.dragSource.hasFormat('price')){
          DragManager.acceptDragDrop(dropTarget);
        }
      }
      private function dragDropHandler(event:DragEvent):void{
        var name:String= String(event.dragSource.dataForFormat('name'));
        var price:Number=Number(event.dragSource.dataForFormat('price'));
        this.cartContents.addItem({name:String(event.dragSource.dataForFormat('name')),price:String(event.dragSource.dataForFormat('price'))});
        total+=price;
      }
    ]]>
  </mx:Script>
  <mx:Canvas x="19" y="10">
  <mx:Image x="23" y="35" width="64" height="64" mouseMove="dragIt(event,'Dreamweaver',499);" source="@Embed(source='../assets/056.png')"/>
  <mx:Label x="41" y="107" text="499"/>
  <mx:Image x="23" y="133" width="64" height="64" mouseMove="dragIt(event,'Fireworks',299);"  source="@Embed(source='../assets/057.png')"/>
  <mx:Label x="41" y="205" text="299"/>
  <mx:Image x="23" y="231" width="64" height="64" mouseMove="dragIt(event,'Flash',599);" source="@Embed(source='../assets/059.png')"/>
  <mx:Label x="41" y="303" text="599"/>
  </mx:Canvas>
  <mx:Label x="210" y="61" text="购物篮" fontSize="12"/>
  <mx:DataGrid x="129.5" y="102" id="cart" dataProvider="{cartContents}" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" height="165" fontSize="12">
    <mx:columns>
      <mx:DataGridColumn headerText="产品" dataField="name"/>
      <mx:DataGridColumn headerText="价格" dataField="price"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Label x="186" y="292" text="总计：{total}" fontSize="12"/>
  <mx:Label x="129.5" y="0" text="拖拽物品放入购物篮中" fontSize="12"/>
  <mx:HRule x="5" y="20" width="390"/>
  
</mx:Application>