Chinaunix首页 | 论坛 | 博客
  • 博客访问: 92686
  • 博文数量: 41
  • 博客积分: 2650
  • 博客等级: 少校
  • 技术积分: 680
  • 用 户 组: 普通用户
  • 注册时间: 2008-06-23 16:26
文章分类

全部博文(41)

文章存档

2011年(1)

2008年(40)

我的朋友

分类:

2008-06-24 15:29:41


list-based控件的拖放事件

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

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

xmlns:mx=""

creationComplete="initApp();">

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

}

]]>

text="Available Albums"/>

id="srcgrid"

allowMultipleSelection="true"

dragEnabled="true"

dropEnabled="true"

dragMoveEnabled="true">

dataField="Artist"/>

dataField="Album"/>

dataField="Price"/>

text="Buy These Albums"/>

id="destgrid"

allowMultipleSelection="true"

dragEnabled="true"

dropEnabled="true"

dragMoveEnabled="true"

dragDrop="dragDropHandler(event);">

dataField="Artist"/>

dataField="Album"/>

dataField="Price"/>

 

id="b1"

label="Reset"

click="initApp()"

/>

 注意到了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 Mangerflash.desktp.NativeDragManager类实现。默认的,Flex中由定义的程序使用Flex drag-and drop manager.即使程序运行在AIR中,当然运行在AIR中的程序也可以制定使用AIRdrag-and-drop manager.这就需要配置Flex mx.managers.DragManger类,指定使用AIR中的drag-and-drop manger. 若使用Flex程序默认使用AIRdrag-and-drop 管理器。以下举例在程序指定使用AIR中的drag-and-drop管理器:

xmlns:mx=""

initialize="initDandD();">

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

}

]]>

...

1:用Canvas作为drop target

xmlns:mx="">

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

}

]]>

id="v1"

width="500" height="500"

borderStyle="solid"

backgroundColor="#DDDDDD"

dragEnter="dragEnterHandler(event);"

dragDrop="dragDropHandler(event);">

id="myimg"

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

mouseMove="mouseMoveHandler(event);"/>

-待续--------------------------------

阅读(354) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~