10.1.使用DragManager 类

10.1.1. 问题
你想在程序中从一个地方移动数据到另一个地方。
10.1.2. 解决方法
使用mx.manager.DragManager 类管理拖拽操作以及在释放目标上监听拖拽事件。
10.1.3. 讨论
DragManager 类用于管理在你的程序里执行的拖拽操作。当一个拖拽操作被初始化,拖拽源(drag source)通过静态方法doDrag 增加到DragManager。被称为释放目标(drop target)的组件了注册事件监听器,从而监听由DragManager 发出的事件。它们接受DragManager上可用的数据源。

数据源通过一个初始组件赋予DragManager,它们能够被移动或复制。一个拖拽操作的缺省处理过程是从一个地方移动数据到另一个地方国。但如有需要实现自己的复制过程,你可以使用DragManager 手动添加拖拽支持。

下面的例子让你在一个Canvas 容器里移动一个Box 组件。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxmllayout="horizontal">
<mx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
private static const FORMAT:String = "box";
private function mouseDownHandler(evt:MouseEvent ):void{
var initiator:IUIComponent = evt.currentTarget as IUIComponent;
var dragSource:DragSource = new DragSource();
dragSource.addData( initiator, FORMAT );
DragManager.doDrag( initiator, dragSource, evt );
}
private function dragEnterHandler( evt:DragEvent ):void {
if ( evt.dragSource.hasFormat( FORMAT ) ) {
DragManager.acceptDragDrop(Canvas(evt.currentTarget));
}
}
private function dropHandler( evt:DragEvent ):void {
var box:Box = Box( evt.dragInitiator );
box.x = evt.localX;
box.y = evt.localY;
}

]]>
</mx:Script>
<mx:Canvas id="canvasbackgroundColor="0xEEEEEEwidth="300height="300"
dragEnter="dragEnterHandler(event);dragDrop="dropHandler(event);">

<mx:Box id="dragItemwidth="20height="20backgroundColor="0x00FFCCmouseDown="mouseDownHandler(event);" />
</mx:Canvas>
</mx:Application>

当<mx:Box>实例发出mouseDown 事件时,mouseDownHandler 方法被调用并且拖拽源数据被增加到DragManager。DragManager.doDrag 方法初始一个拖拽操作,需要至少三个参数:拖拽初始条目的引用, 一个mx.core.DragSource 对象和调用事件处理器的flash.events.MouseEvent 对象。该方法还包括与释放操作相关的鼠标信息。拖拽期间默认的被渲染图像是一个具有透明度的矩形。你可以通过doDrag 方法改变这幅图像(也被称为拖拽代理),但在这个例子里使用了默认的参数值。

Canvas 组件是由Box 组件初始的拖拽动作的一个释放目标。它为DragManager 发出的dragEnter 和dragDrop 事件指派事件处理器。DragManager 对象的静态方法acceptDragDrop检查dragEventHandler 方法,拖拽源数据格式,doDrag 方法里的原始集合,以激活拖拽动作。acceptDragDrop 方法所需的参数是将要响应拖拽事件的释放目标(drag target)。程序的dropHandler 方法响应释放动作(drop action)并且处理这个移动的初始器(在这个例子里是Box 组件)的位置,其位置根据鼠标释放时指针的位置确定。

前面的例子从一个地方移动数据到另一个地方使用了缺省设置,但你也可以很容易地建立处理过程来复制那些数据。接下来的例子复制了一个可拖拽的Box 组件的信息给一个拖拽源(DragSource)对象,这个对象用来创建一个新的Box 实例,然后将这个Box 实例增加到释放目标(drop target)的显示清单中。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxmllayout="horizontal">
<mx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;
private static const FORMAT:String = "box" ;
private function mouseDownHandler(evt:MouseEvent ):void {
var initiator:Box = evt.currentTarget as Box;
var boxData:Object = new Object();
boxData.width = initiator.width;
boxData.height= initiator.height;
boxData.backgroundColor = initiator.getStyle( "backgroundColor");
var dragSource:DragSource = new DragSource();
dragSource.addData( boxData, FORMAT );
DragManager.doDrag( initiator, dragSource, evt );
}
private function dragEnterHandler( evt:DragEvent ):void {
if ( evt.dragSource.hasFormat( FORMAT ) ) {
DragManager.acceptDragDrop(Canvas(evt.currentTarget));
}
}
private function dropHandler( evt:DragEvent ):void {
var boxData:Object = evt.dragSource.dataForFormat( FORMAT );
var box:Box = new Box();
box.width = boxData.width;
box.height = boxData.height;
box.setStyle( "backgroundColor",boxData.backgroundColor );
box.x = evt.localX;
box.y = evt.localY;
canvas.addChild( box );
}

]]>
</mx:Script>
<mx:Canvas id="canvasbackgroundColor="0xEEEEEEwidth="300height="300"
dragEnter="dragEnterHandler(event);dragDrop="dropHandler(event);">

<mx:Box id="dragItemwidth="20height="20backgroundColor="0x00FFCCmouseDown="mouseDownHandler(event);" />
</mx:Canvas>
</mx:Application>

在mouseDownHandler 方法里,创建一个自定义的通用object,它的属性与初始的Box 组件相关。这个object 被增加到DragSource 对象并且在程序的拖拽事件处理器内通过DragSource.dataForFormat 方法访问。在dropHandler 方法内,一个新的Box 组件被初始,它的属性由拖拽操作确定并且被添加到Canvas 容器的显示清单中。

加支付宝好友偷能量挖...


评论(0)网络
阅读(90)喜欢(0)flash/flex/fcs/AIR