Flex拖拽

前言

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="vertical"> <mx:Script> <!--[CDATA[ import mx.core.IUIComponent; import mx.events.DragEvent; import mx.managers.DragManager; import mx.collections.ArrayCollection; import mx.core.DragSource; [Bindable] private var myListDP:ArrayCollection=new ArrayCollection(); private function dragIt(initator:Label,dsData:String,event:MouseEvent,format:String):void{ var ds:DragSource=new DragSource(); //拖拽源 ds.addData(dsData,format);//数据赋值给DragSource DragManager.doDrag(initator,ds,event);//使得lable可以被拖拽 } private function doDragEnter(event:DragEvent,format:String):void{ if(event.dragSource.hasFormat(format)){ DragManager.acceptDragDrop(IUIComponent(event.target));//允许List接收释放 } } private function doDragDrop(event:DragEvent,format:String):void{ var myLabelData:Object=new Object(); myLabelData=event.dragSource.dataForFormat("myFormat"); myList.dataProvider.addItem(myLabelData); } ]]--> </mx:Script> <mx:Label id="myLabel" text="Drag me" mouseDown="dragIt(myLabel,'Test Label',event,'myFormat')"/> <mx:Spacer width="20"/> <mx:List id="myList" width="200" dataProvider="{myListDP}" dragEnter="doDragEnter(event,'myFormat')" dragDrop="doDragDrop(event,'myFormat')"/> </mx:Application>