Flex3组件拖放教程(6)

例子3：nonlist-based控件的数据移动和拷贝< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

Drag initiator中的dragComplete 会在拖的操作哦结束是触发，不管被拖的数据是否真的被drop target所接受。 Drag initiator 可以制定一个处理函数来执行drag后或者target被接受drop时的清理动作。dragComplet还有一个用处在于，当移动数据完成后，执行在drag initiator 的移除操作，因为所谓的移动实际上是先拷贝副本，然后再drag initiator执行移除操作来完成的。要决定用户要执行是移动操作还是拷贝操作，会由设定在dragOver事件处理返回，一般当用户在拖的过程中，按下control key是执行拷贝操作，按下shift key执行移动操作。

<?xml version="1.0"?>

<!-- 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 icon image.

[Embed(source='assets/globe.jpg')]

public var globeImage:Class;

// The mouseMove event handler for the Image control

// functioning as the drag initiator.

private function mouseOverHandler(event:MouseEvent):void

{

var dragInitiator:Image=Image(event.currentTarget);

var ds:DragSource = new DragSource();

ds.addData(dragInitiator, "img");

// The drag manager uses the image as the drag proxy

// and sets the alpha to 1.0 (opaque),

// so it appears to be dragged across the canvas.

var imageProxy:Image = new Image();

imageProxy.source = globeImage;

imageProxy.height=10;

imageProxy.width=10;

DragManager.doDrag(dragInitiator, ds, event,

imageProxy, -15, -15, 1.00);

}

// The dragEnter event handler for the Canvas container

// functioning as the drop target.

private function dragEnterHandler(event:DragEvent):void {

if (event.dragSource.hasFormat("img"))

DragManager.acceptDragDrop(Canvas(event.currentTarget));

}

// The dragOver event handler for the Canvas container

// sets the type of drag-and-drop

// operation as either copy or move.

// This information is then used in the

// dragComplete event handler for the source Canvas container.

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);

}

// The dragDrop event handler for the Canvas container

// sets the Image control's position by

// "dropping" it in its new location.

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;

// Since this is a copy, create a new object to

// add to the drop target.

var newImage:Image=new Image();

newImage.source = draggedImage.source;

newImage.x = dropCanvas.mouseX;

newImage.y = dropCanvas.mouseY;

dropCanvas.addChild(newImage);

}

}

// The dragComplete event handler for the source Canvas container

// determines if this was a copy or move.

// If a move, remove the dragged image from the Canvas.

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>

<!-- Canvas holding the Image control that is the drag initiator. -->

<mx:Canvas

width="250" height="500"

borderStyle="solid"

backgroundColor="#DDDDDD">

<!-- The Image control is the drag initiator and the drag proxy. -->

<mx:Image id="myimg"

source="@Embed(source='assets/globe.jpg')"

mouseMove="mouseOverHandler(event);"

dragComplete="dragCompleteHandler(event);"/>

</mx:Canvas>

<!-- This Canvas is the drop target. -->

<mx:Canvas

width="250" height="500"

borderStyle="solid"

backgroundColor="#DDDDDD"

dragEnter="dragEnterHandler(event);"

dragOver="dragOverHandler(event);"

dragDrop="dragDropHandler(event);">

</mx:Canvas>

</mx:Application>