flex关于拖放的类

DragManager 类管理拖放操作,您可以使用它来将数据从 Flex 应用程序中的一个位置移动到另一位置。例如,您可以选择一个对象(如 List 控件中的项目)或一个 Flex 控件(如 Image 控件),然后将其拖至另一个组件进行添加。

DragManager 的所有方法和属性都是静态的,因此不需要为其创建实例。

所有 Flex 组件都支持拖放操作。Flex 为 List、Tree 和 DataGrid 控件的拖放操作提供了附加支持。

当用户使用鼠标选择某个项目时,所选组件称为拖动启动器。拖动操作期间显示的图像称为拖动代理。

当用户将拖动代理移动到其他组件时,系统会向该组件发送 dragEnter 事件。如果该组件接受拖动,即可成为放置目标,并接收 dragOverdragExitdragDrop 事件。

拖动操作完成后,会向拖动启动器发送 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>


你可能感兴趣的:(类,Flex,拖放)