Flex3组件拖放教程(3)

 

例子：处理list-based控件的拖放事件

 当你设置了dragEnabled或者dropEnabled属性为ture时，Flex自动定义了默认的事件处理来执行拖放操作。当然你可以利用这些默认的事件处理，也可以自行定义你自己的事件处理。如果要定义自己的事件处理，必须在drag initiator设置dragEnabled属性为false,或者在drag target中设置dropEnabld为false.那如果要使用这些自己定义的事件处理，除了事先定义好之外，你最好需要显式停止flex默认的事件处理：即在你自己的事件处理中调用Event.preventDefault().注意：你如果在Tree控件中，当在移动一个data从一个tree控件到另外一个时候，你调用了Event.preventDefault()方法来处理dragComplete或者dragDrop事件，那么程序就会阻止drop操作。

以下的例子为dragDrop定义了一个事件处理。这个事件处理在默认的事件处理执行前执行来显式Alert信息。

<!-- dragdrop/SimpleDGToDGAlert.mxml -->

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

creationComplete="initApp();">

<mx:Script>

<![CDATA[

import mx.events.DragEvent;

import mx.controls.Alert;

import mx.collections.ArrayCollection;

private function initApp():void {

srcgrid.dataProvider = new ArrayCollection([

{Artist:'Carole King', Album:'Tapestry', Price:11.99},

{Artist:'Paul Simon', Album:'Graceland', Price:10.99},

{Artist:'Original Cast', Album:'Camelot', Price:12.99},

{Artist:'The Beatles', Album:'The White Album', Price:11.99}

]);

destgrid.dataProvider = new ArrayCollection([]);

}

// Define the event listener.

public function dragDropHandler(event:DragEvent):void {

// dataForFormat() always returns an Array

// for the list-based controls

// in case multiple items were selected.

var dragObj:Array=

event.dragSource.dataForFormat("items") as Array;

// Get the Artist for all dragged albums.

var artistList:String='';

for (var i:Number = 0; i < dragObj.length; i++) {

artistList+='Artist: ' + dragObj[i].Artist + '/n';

}

Alert.show(artistList);

}

]]>

</mx:Script>

<mx:HBox>

<mx:VBox>

<mx:Label text="Available Albums"/>

<mx:DataGrid id="srcgrid"

allowMultipleSelection="true"

dragEnabled="true"

dropEnabled="true"

dragMoveEnabled="true">

<mx:columns>

<mx:DataGridColumn dataField="Artist"/>

<mx:DataGridColumn dataField="Album"/>

<mx:DataGridColumn dataField="Price"/>

</mx:columns>

</mx:DataGrid>

</mx:VBox>

<mx:VBox>

<mx:Label text="Buy These Albums"/>

<mx:DataGrid id="destgrid"

allowMultipleSelection="true"

dragEnabled="true"

dropEnabled="true"

dragMoveEnabled="true"

dragDrop="dragDropHandler(event);">

<mx:columns>

<mx:DataGridColumn dataField="Artist"/>

<mx:DataGridColumn dataField="Album"/>

<mx:DataGridColumn dataField="Price"/>

</mx:columns>

</mx:DataGrid>

 

</mx:VBox>

</mx:HBox>

<mx:Button id="b1"

label="Reset"

click="initApp()"

/>

</mx:Application>

 注意到了dataFormat()方法指定了一个参数名称items.这是因为list-based控件已经事先定义了drag data的数据格式。所有的list控件除了Tree控件，其格式字符为”items”，对于Tree控件来说其格式字符值为”treeItems”.还需要注意的是，dataFormat()方法返回的值是一个数组，这是因为list-based控件允许用户选择读多个items的缘故。

运行在AIR中的Flex应用程序的拖放

运行在AIR的中Flex程序可以使用Flex drag manager或者AIR drag Manger. Flex drag manager由 mx:mangers.DragManger类实现，而AIR drag Manger由flash.desktp.NativeDragManager类实现。默认的，Flex中由<mx:Application>定义的程序使用Flex drag-and drop manager.即使程序运行在AIR中，当然运行在AIR中的程序也可以制定使用AIR的drag-and-drop manager.这就需要配置Flex的 mx.managers.DragManger类，指定使用AIR中的drag-and-drop manger. 若使用<mx:WindowedApplicaiton>的Flex程序默认使用AIR的drag-and-drop 管理器。以下举例在<mx:Application>程序指定使用AIR中的drag-and-drop管理器：

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

initialize="initDandD();">

<mx:Script>

<![CDATA[

// Ensure that the NativeDragManagerImpl class is linked in to your

application.

import mx.managers.NativeDragManagerImpl;

var placeholder:NativeDragManagerImpl;

// Handle the initialize event to load the DragManager.

public function initDandD():void

{

// Ensure the DragManager is loaded, so that dragging in an AIR works.

DragManager.isDragging;

}

]]>

</mx:Script>

...

</mx:Application>

拖放实例

例子1：用Canvas作为drop target

<?xml version="1.0"?>

<!-- dragdrop/DandDImage.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 mouseMoveHandler(event:MouseEvent):void

{

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

var ds:DragSource = new DragSource();

ds.addData(dragInitiator, "img");

DragManager.doDrag(dragInitiator, ds, event);

}

// 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="mouseMoveHandler(event);"/>

</mx:Canvas>

</mx:Application>