DragManager 类管理拖放操作,您可以使用它来将数据从 Flex 应用程序中的一个位置移动到另一位置。例如,您可以选择一个对象(如 List 控件中的项目)或一个 Flex 控件(如 Image 控件),然后将其拖至另一个组件进行添加。
DragManager 的所有方法和属性都是静态的,因此不需要为其创建实例。
所有 Flex 组件都支持拖放操作。Flex 为 List、Tree 和 DataGrid 控件的拖放操作提供了附加支持。
当用户使用鼠标选择某个项目时,所选组件称为拖动启动器。拖动操作期间显示的图像称为拖动代理。
当用户将拖动代理移动到其他组件时,系统会向该组件发送 dragEnter
事件。如果该组件接受拖动,即可成为放置目标,并接收 dragOver
、dragExit
和 dragDrop
事件。
拖动操作完成后,会向拖动启动器发送 dragComplete
事件。
DragSource 类中包含正被拖动的数据。数据可以采用多种格式,具体取决于启动拖动的控件的类型。
每种数据格式都使用一个字符串进行标识。hasFormat()
方法用于确定对象是否包含使用相应格式的数据。dataForFormat()
方法用于检索指定格式的数据。
可以使用 addData()
方法直接添加数据,也可以使用 addHandler()
方法间接添加数据。addHandler()
方法会注册一个回调,请求该数据时将调用此回调。添加非本机格式的数据可能需要进行大量计算或转换,此时该方法就非常有用。例如,如果您具有原始声音数据,则可以添加 MP3 格式处理程序。仅当请求 MP3 数据时才执行 MP3 转换
DragEvent 类代表作为拖放操作部分进行分派的事件对象。
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DandDImageCopyMove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal">
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
[Embed(source='./assets/20.jpg')]
public var globeImage:Class;
// mouseMove数据管理用来定义图片控件的功能。
private function mouseOverHandler(event:MouseEvent):void
{
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
//向拖动源添加数据和相应的格式 String。此方法不返回值。
ds.addData(dragInitiator, "img");
// 拖动管理器所以图片作为拖动代理。
var imageProxy:Image = new Image();
imageProxy.source = globeImage;
imageProxy.height=10;
imageProxy.width=10;
DragManager.doDrag(dragInitiator, ds, event,
imageProxy, -15, -15, 1.00);
}
// dragEnter事件管理器用来定义放置目标。
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img"))
//Canvas接受拖放
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
// dragOver事件管理器设定拖放操作为复制还是移动。
// 复制或移动会影响在dragComplete事件管理器中的操作。
private function dragOverHandler(event:DragEvent):void
{
if (event.dragSource.hasFormat("img")) {
if (event.ctrlKey) {
//设置拖放操作的反馈指示符
DragManager.showFeedback(DragManager.COPY);
return;
}
else {
DragManager.showFeedback(DragManager.MOVE);
return;
}
}
DragManager.showFeedback(DragManager.NONE);
}
// dragDrop事件管理器设定图片控件在目标容器中的位置。
private function dragDropHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img")) {
var draggedImage:Image =
event.dragSource.dataForFormat('img') as Image;
var dropCanvas:Canvas = event.currentTarget as Canvas;
var newImage:Image=new Image();
newImage.source = draggedImage.source;
newImage.x = dropCanvas.mouseX;
newImage.y = dropCanvas.mouseY;
dropCanvas.addChild(newImage);
}
}
// dragComplete事件管理器用来完成复制或移动图片。
private function dragCompleteHandler(event:DragEvent):void {
var draggedImage:Image =
event.dragInitiator as Image;
var dragInitCanvas:Canvas =
event.dragInitiator.parent as Canvas;
if (event.action == DragManager.MOVE)
dragInitCanvas.removeChild(draggedImage);
}
]]>
</mx:Script>
<mx:Panel
title="不同类型的非列表类控件中复制移动图片示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox width="100%" height="100%">
<mx:Canvas
width="200" height="200"
borderStyle="solid"
backgroundColor="#FFF6D5">
<mx:Image id="myimg"
source="@Embed(source='./assets/20.jpg')"
mouseMove="mouseOverHandler(event);"
dragComplete="dragCompleteHandler(event);"/>
</mx:Canvas>
<mx:Canvas
width="200" height="200"
borderStyle="solid"
backgroundColor="#FEDEF1"
dragEnter="dragEnterHandler(event);"
dragOver="dragOverHandler(event);"
dragDrop="dragDropHandler(event);">
</mx:Canvas>
</mx:HBox>
</mx:Panel>
</mx:Application>