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信息。
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 Manger由flash.desktp.NativeDragManager类实现。默认的,Flex中由定义的程序使用Flex drag-and drop manager.即使程序运行在AIR中,当然运行在AIR中的程序也可以制定使用AIR的drag-and-drop manager.这就需要配置Flex的 mx.managers.DragManger类,指定使用AIR中的drag-and-drop manger. 若使用的Flex程序默认使用AIR的drag-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);"/>
-待续--------------------------------