Flex拖拽的基本实现，以及图片代理的创建和使用

一、BaseList表格类的拖拽

Flex组件内置了处理拖拽事件的接口，有些控件已经实现了拖拽功能，比如List、DataGrid、Menu、HorizontalList、 PrintDataGrid、TileList、Tree，在设置相关的拖拽属性后，它们都可以在相同类型的组件之间利用鼠标来实现数据的转移。

allowDragSelection          是否可以拖选
allowMultipleSelection      是否可以多选
dragEnabled                 是否可以拖动子元素
dragMoveEnabled             是否移动元素位置，而不是复制元素

dropEnabled                 是否可以将物体放置进来

例子：可以实现表格内部数据拖拽，以及递归调整序列号

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

<mx:Script>

<![CDATA[

import framework.factory.RemoteFactory;

import mx.collections.ArrayCollection;

import mx.controls.Alert;

import mx.events.CloseEvent;

import mx.events.DragEvent;

import mx.rpc.events.ResultEvent;

import mx.rpc.remoting.RemoteObject;

[Bindable]

private var remote:RemoteObject=null;

private var urlPath:String = null;

[Bindable]

private var dpHierarchy:ArrayCollection = new ArrayCollection([

{Region:"Southwest", children: [

{Region:"Arizona", children: [

{index: 1, Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},

{index: 2, Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},

{Region:"Central California", children: [

{index: 1, Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},

{Region:"Nevada", children: [

{index: 1, Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},

{Region:"Northern California", children: [

{index: 1, Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},

{index: 2, Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},

{Region:"Southern California", children: [

{index: 1, Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},

{index: 2, Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}

]}

]);

protected function dgXtcd_dragCompleteHandler(event:DragEvent):void

{

var dataList:Array = dpHierarchy.source;

digui(dataList);

}

private function digui(array:Array):void

{

var i:int = 0;

for each(var obj:Object in array)

{

var exitChild:Boolean = obj.hasOwnProperty("children");

if(exitChild)

{

var childArray:Array = obj["children"] as Array;

digui(childArray);

}

else

{

obj.index = i + 1;

i++;

}

}

}

]]>

</mx:Script>

<mx:VBox width="100%" height="100%" verticalGap="10" paddingTop="5" paddingLeft="5" paddingBottom="5" paddingRight="5">

<mx:HBox width="100%" height="32" horizontalGap="10">

<mx:Button label="加载系统菜单"/>

<mx:Button label="更新系统菜单"/>

</mx:HBox>

<mx:AdvancedDataGrid id="dgXtcd" width="100%" height="100%" doubleClickEnabled="true" 

dragEnabled="true"  dropEnabled="true" dragMoveEnabled="true"

sortableColumns="false" dragComplete="dgXtcd_dragCompleteHandler(event)">

<mx:dataProvider> 

<mx:HierarchicalData id="hd2" source="{dpHierarchy}" childrenField="children"/>  

</mx:dataProvider> 

<mx:columns>

<mx:AdvancedDataGridColumn dataField="Region" headerText="地区名称"/>

<mx:AdvancedDataGridColumn dataField="index" headerText="排序"/>

<mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="菜单编码"/>

<mx:AdvancedDataGridColumn dataField="Actual" headerText="业务代码"/>

<mx:AdvancedDataGridColumn dataField="Estimate" headerText="打开方式"/>

</mx:columns>

</mx:AdvancedDataGrid>

</mx:VBox>

</mx:Application>

二、普通Flex组件之间的拖拽，以及在拖拽过程中，利用代理数据。

在Flex中，有3个专门的对象供开发者处理拖拽事件：

DragManager：位于mx.managers包中，管理拖拽事件
DragSource：位于mx.core包中，是Flex框架中的核心成员，处理拖拽中的数据传递
DragEvent：位于mx.events包中，拖拽操作中的事件对象。
按照逻辑，拖拽中至少有两个对象：一方提供数据，一方接收数据。在这个过程中，提供数据的一方按照前后

顺序，可以把整个过程划分为下面几个事件：
       mouseDown：鼠标按下。
       mouseMove：鼠标移动。
       dragComplate：鼠标释放。判断目标是否接受数据，如果可以，拖放成功。
接收方也将经历几个阶段

       dragEnter：被拖动对象移动到目标范围中。
       dragDrop：鼠标在目标上松开。
       dragOver：鼠标移动到目标上。

       dragExit：独享被拖离目标范围。

例子：普通Flex控件之间的拖拽，采用控件的复制图片作为代理数据

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" xmlns:containers="dNdLib.containers.*">

<mx:Script>

<![CDATA[

import dNdLib.managers.DnDManager;

import mx.controls.Image;

import mx.core.DragSource;

import mx.core.IFlexDisplayObject;

import mx.core.UIComponent;

import mx.events.DragEvent;

import mx.managers.DragManager;

//设置一个标号format

private static const DRAG_SOURCE_FORMAT:String = "button";

/**

* 第一步：被拖拽的目标在鼠标按下的时候，准备拖拽的数据源

* 

**/

private function dragSourceReady(event:MouseEvent):void

{

var dragUI:Button = event.currentTarget as Button;

var ds:DragSource = new DragSource();

//设置一个标号format

ds.addData( {"dragSource":dragUI, "x" : event.localX, "y" : event.localY}, DRAG_SOURCE_FORMAT);

//图片代理

var proxyImg:Image = new Image();

proxyImg.source = new Bitmap(getBitmapData(dragUI));

proxyImg.width = dragUI.width;

proxyImg.height = dragUI.height;

DragManager.doDrag(dragUI, ds, event, proxyImg, 0, 0, .6); 

}

/**

* 获取图片信息, 可以将所有DisplayObject组件转换为图片对象显示

* */

private function getBitmapData(target:DisplayObject):BitmapData

{

var res:BitmapData = new BitmapData(target.width, target.height);

res.draw(target);

return res;

}

/**

* 第二步：进入拖放区域

* */

private function dragEnterHandler(event:DragEvent):void

{

// 进入区域, 设置状态为允许拖放

if (event.dragSource.hasFormat(DRAG_SOURCE_FORMAT))

{

DragManager.acceptDragDrop(event.target as UIComponent);

}

}

/**

* 第三步：释放拖拽，处理业务

* */

private function dragDropHandler(event:DragEvent):void

{

var newUIObj:Object = event.dragSource.dataForFormat(DRAG_SOURCE_FORMAT);

if(newUIObj)

{

//得到源按钮，创建新的按钮对象

var newUI:Button = newUIObj.dragSource as Button;

//创建新的按钮对象

var button:Button = new Button();

button.label = newUI.label;

button.width = newUI.width;

button.height = newUI.height;

var x:int = int(newUIObj.x);

var y:int = int(newUIObj.y);

button.x = x;

button.y = y;

// 显示图片

cansAccess.addChild(button);

}

}

]]>

</mx:Script>

<mx:HBox width="100%" height="100%">

<mx:HBox width="50%" height="100%">

<!-- 第三方容器支持拖拽的操作, 需要利用dNdLib.swc -->

<containers:DnDContainer borderStyle="solid" id="left" backgroundColor="#FFFFFF" 

width="161" height="237" x="110" y="168">

<mx:Button label="拖动我" mouseDown="DnDManager.getInstance().doDrag(event)" width="92" 

   

  height="32"/>

<mx:CheckBox label="拖动就这么简单" mouseDown="DnDManager.getInstance().doDrag(event)"/>

</containers:DnDContainer>

<containers:DnDContainer borderStyle="solid" id="bottom" backgroundColor="#FFFFFF"

x="415" y="168" width="140" height="237"/>

</mx:HBox>

<!-- Flex自带的标准拖拽操作 -->

<mx:HBox width="50%" height="100%">

<mx:Canvas y="40" id="cansAccess" backgroundColor="#FFFFFF" width="300" height="200"

  dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" />

<mx:Button id="btn" label="拖动我到面板" mouseDown="dragSourceReady(event)"/>

</mx:HBox>

</mx:HBox>

</mx:Application>