Flex3组件拖放教程(4)

 

例子2：指定drag proxy< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

在事件处理mouseDown或者mouseUp中，你可以通过doDrag()来制定drag proxy.如果你不自己指定，哪么程序将使用默认值。你可以自行定义drag proxy以下属性：dragImage, xoffset, yoffset, imageAlpha.你必须制定drag proxy的大小，否则将不会被显示出来。举例：以下将设置proxy的长宽为15 pixel.

<?xml version="1.0"?>

<!-- dragdrop\DandDImageProxy.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

//Import classes so you don't have to use full names.

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

// initiates the drag-and-drop operation.

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 control

// 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=15;

imageProxy.width=15;

DragManager.doDrag(dragInitiator, ds, event,

imageProxy, -15, -15, 1.00);

}

// The dragEnter event handler for the Canvas container

// enables dropping.

private function dragEnterHandler(event:DragEvent):void {

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

{

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

}

}

// 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 {

Image(event.dragInitiator).x =

Canvas(event.currentTarget).mouseX;

Image(event.dragInitiator).y =

Canvas(event.currentTarget).mouseY;

}

]]>

</mx:Script>

<!-- The Canvas is the drag target -->

<mx:Canvas id="v1"

width="500" height="500"

borderStyle="solid"

backgroundColor="#DDDDDD"

dragEnter="dragEnterHandler(event);"

dragDrop="dragDropHandler(event);">

<!-- The image is the drag initiator. -->

<mx:Image id="myimg"

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

mouseMove="mouseOverHandler(event);"/>

</mx:Canvas>

</mx:Application>

例子3：为drop target处理dragOver和dragExit事件

当用户移动鼠标到drop target，而它的dragEnter的事件已经调用DragManger.acceptDragDrop（）方法时将会触发dragOver事件。当然这个事件是可选的。

dragOver事件相当有用尤其是当用户移动鼠标到drop target时能返回一个可视化的回馈。常使用的有：DragManager.COPY，DragManager.LINK，DragManager.MOVE，DragManager.NONE等。用户可以通过DragManger.showFeedback()方法来指定具体的显示形式。

dragExit是在用户在drop target放下drag proxy，但还没有放入数据时调度的。你可以利用这个方法来恢复之前因为dragOver事件所作的可视化的改变。

<?xml version="1.0"?>

<!-- dragdrop\DandDListToListShowFeedback.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

creationComplete="initApp();">

<mx:Script>

<![CDATA[

import mx.managers.DragManager;

import mx.events.DragEvent;

import mx.collections.ArrayCollection;

private function initApp():void {

firstList.dataProvider = new ArrayCollection([

{label:"First", data:"1"},

{label:"Second", data:"2"},

{label:"Third", data:"3"},

{label:"Fourth", data:"4"}

]);

secondList.dataProvider = new ArrayCollection([]);

}

// Variable to store original border color.

private var tempBorderColor:uint;

// Flag to indicate that tempBorderColor has been set.

private var borderColorSet:Boolean = false;

private function dragOverHandler(event:DragEvent):void {

// Explpicitly handle the dragOver event.

event.preventDefault();

// Since you are explicitly handling the dragOver event,

// call showDropFeedback(event) to have the drop target

// display the drop indicator.

// The drop indicator is removed

// automatically for the list controls by the built-in

// event handler for the dragDrop event.

event.currentTarget.showDropFeedback(event);

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

{

// Set the border to green to indicate that

// this is a drop target.

// Since the dragOver event is dispatched continuosly

// as you move over the drop target, only set it once.

 

if (borderColorSet == false) {

tempBorderColor =

event.currentTarget.getStyle('borderColor');

borderColorSet = true;

}

// Set the drag-feedback indicator based on the

// type of drag-and-drop operation.

event.currentTarget.setStyle('borderColor', 'green');

if (event.ctrlKey) {

DragManager.showFeedback(DragManager.COPY);

return;

}

else if (event.shiftKey) {

DragManager.showFeedback(DragManager.LINK);

return;

}

else {

DragManager.showFeedback(DragManager.MOVE);

return;

}

}

// Drag not allowed.

DragManager.showFeedback(DragManager.NONE);

}

private function dragDropHandler(event:DragEvent):void {

dragExitHandler(event);

}

// Restore the border color.

private function dragExitHandler(event:DragEvent):void {

event.currentTarget.setStyle('borderColor', tempBorderColor);

borderColorSet = true;

}

]]>

</mx:Script>

<mx:HBox id="myHB">

<mx:List id="firstList"

dragEnabled="true"

dragMoveEnabled="true"/>

<mx:List id="secondList"

borderThickness="2"

dropEnabled="true"

dragOver="dragOverHandler(event);"

dragDrop="dragExitHandler(event);"

dragExit="dragExitHandler(event);"/>

</mx:HBox>

<mx:Button id="b1"

label="Reset"

click="initApp()"

/>

</mx:Application>

    移动和拷贝数据

移动和拷贝数据都是拖放操作的一部分。

关于移动数据

当你移动数据，是在drop target新增它，然后在drag initiator删除它来完成的。你利用dragDrop事件为drop target添加数据，利用dragComplete为drag initiator移除数据。而这个过程中你需要做多少工作取决于你使用的是list-based还是nonlist-based组件。

关于拷贝数据

List-based控件默认的是自动处理移除动作，所以你要做拷贝动作，你必须为drop target显式的处理dragDrop事件