Flex之拖放
1.一个方向的拖放：
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\SimpleListToListMove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initApp():void {
srclist.dataProvider =
new ArrayCollection(['读书', '看电视', '做运动', '逛街', '种菜']);
destlist.dataProvider = new ArrayCollection([]);
}
]]>
</mx:Script>
<mx:Panel
title="拖动选项示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox>
<mx:VBox>
<mx:Label text="可供选择的行为"/>
<mx:List id="srclist"
allowMultipleSelection="true"
dragEnabled="true"
dragMoveEnabled="true"/>
</mx:VBox>
<mx:VBox>
<mx:Label text="所选择的行为"/>
<mx:List id="destlist"
dropEnabled="true"/>
</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:Application>
2.两个方向的拖放：
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\SimpleDGToDG.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initApp():void {
srcgrid.dataProvider = new ArrayCollection([
{摄影师:'Carole King', 照片:'Tapestry', 价格:11.99},
{摄影师:'Paul Simon', 照片:'Graceland', 价格:10.99},
{摄影师:'Original Cast', 照片:'Camelot', 价格:12.99},
{摄影师:'The Beatles', 照片:'The White', 价格:11.99}
]);
destgrid.dataProvider = new ArrayCollection([]);
}
]]>
</mx:Script>
<mx:Panel
title="数据列表拖放示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox>
<mx:VBox>
<mx:Label text="列表1"/>
<mx:DataGrid id="srcgrid"
allowMultipleSelection="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true">
<mx:columns>
<mx:DataGridColumn dataField="摄影师"/>
<mx:DataGridColumn dataField="照片"/>
<mx:DataGridColumn dataField="价格"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:VBox>
<mx:Label text="列表2"/>
<mx:DataGrid id="destgrid"
allowMultipleSelection="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true">
<mx:columns>
<mx:DataGridColumn dataField="摄影师"/>
<mx:DataGridColumn dataField="照片"/>
<mx:DataGridColumn dataField="价格"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:Application>
3.同一个控件上的拖放：
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\SimpleTreeSelf.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// 初始化树结构数据源。
private function initApp():void {
firstList.dataProvider = treeDP;
}
]]>
</mx:Script>
<mx:XML id="treeDP">
<node label="邮件">
<node label="收件箱"/>
<node label="个人信箱">
<node label="示例"/>
<node label="隐私"/>
<node label="保存"/>
<node label="信息"/>
</node>
<node label="日历"/>
<node label="发出"/>
<node label="垃圾箱"/>
</node>
</mx:XML>
<mx:Panel
title="树结构拖动示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:Tree id="firstList"
width="90%"
height="80%"
showRoot="false"
labelField="@label"
dragEnabled="true"
dropEnabled="true"
allowMultipleSelection="true"
creationComplete="initApp();"/>
</mx:Panel>
</mx:Application>
4. 手工拖放
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DandDCanvas.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.*;
import mx.containers.Canvas;
// 初始化拖动放置操作
private function mouseMoveHandler(event:MouseEvent):void {
// 在事件对象中得到拖动初始者组件。
var dragInitiator:Canvas=Canvas(event.currentTarget);
// 得到拖动初始者组件的颜色。
var dragColor:int = dragInitiator.getStyle('backgroundColor');
// 建立一个DragSource对象。
var ds:DragSource = new DragSource();
// 将事件加入的对象中。
ds.addData(dragColor, 'color');
// 调用DragManager的doDrag()方法来起始拖动。
DragManager.doDrag(dragInitiator, ds, event);
}
// 当用户移动拖动代理到放置目标上。
private function dragEnterHandler(event:DragEvent):void {
// 如果格式为'color'则接受对象。
if (event.dragSource.hasFormat('color')) {
// 从事件对象中得到放置对象组件。
var dropTarget:Canvas=Canvas(event.currentTarget);
// 接受放置。
DragManager.acceptDragDrop(dropTarget);
}
}
//当目标接受拖动对象，并且用户在画布容器上释放鼠标键。
private function dragDropHandler(event:DragEvent):void {
// 从拖动初始者得到数据
var data:Object = event.dragSource.dataForFormat('color');
// 设置画布颜色。
myCanvas.setStyle("backgroundColor", data);
}
]]>
</mx:Script>
<!-- A horizontal box with red and green canvases the user can drag -->
<mx:Panel
title="自定义拖放行为示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox>
<mx:Canvas
width="30" height="30"
backgroundColor="red"
borderStyle="solid"
mouseMove="mouseMoveHandler(event);"/>
<mx:Canvas
width="30" height="30"
backgroundColor="green"
borderStyle="solid"
mouseMove="mouseMoveHandler(event);"/>
</mx:HBox>
<mx:Label text="拖动颜色到画布中"/>
<!-- dragEnter和dragDrop事件运行放置 -->
<mx:Canvas id="myCanvas"
width="100" height="100"
backgroundColor="#FFFFFF"
borderStyle="solid"
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);"/>
</mx:Panel>
</mx:Application>
4. 容器为放置目标示例：
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DragProxyExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
[Embed(source='./assets/eek.gif')]
public var globeImage:Class;
// mouseMove事件管理器用来初始化图像看见的拖动放置操作。
private function mouseOverHandler(event:MouseEvent):void
{
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "img");
// 拖动管理器，使用图像控件为拖动代理，以显示图片在画布中被拖动。
var imageProxy:Image = new Image();
imageProxy.source = globeImage;
imageProxy.height=15;
imageProxy.width=15;
DragManager.doDrag(dragInitiator, ds, event,
imageProxy, -15, -15, 1.00);
}
// dragEnter事件管理器用来使画布容器可以被放入数据。
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img"))
{
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
}
// dragDrop事件管理器用来在画布容器中，通过dropping来设定图片控件的位置。
private function dragDropHandler(event:DragEvent):void {
Image(event.dragInitiator).x =
Canvas(event.currentTarget).mouseX;
Image(event.dragInitiator).y =
Canvas(event.currentTarget).mouseY;
}
]]>
</mx:Script>
<mx:Panel
title="容器为放置目标示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<!-- 画布为放置目标容器 -->
<mx:Canvas id="v1"
width="100%" height="100%"
borderStyle="solid"
backgroundColor="#FBF4D9"
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);">
<!-- 图片为拖动初始者 -->
<mx:Image id="myimg"
source="@Embed(source='./assets/eek.gif')"
mouseMove="mouseOverHandler(event);"/>
</mx:Canvas>
</mx:Panel>
</mx:Application>
5. 设定拖放代理示例:
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DragProxyExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
[Embed(source='./assets/eek.gif')]
public var globeImage:Class;
// mouseMove事件管理器用来初始化图像看见的拖动放置操作。
private function mouseOverHandler(event:MouseEvent):void
{
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "img");
// 拖动管理器，使用图像控件为拖动代理，以显示图片在画布中被拖动。
var imageProxy:Image = new Image();
imageProxy.source = globeImage;
imageProxy.height=15;
imageProxy.width=15;
DragManager.doDrag(dragInitiator, ds, event,
imageProxy, -15, -15, 1.00);
}
// dragEnter事件管理器用来使画布容器可以被放入数据。
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img"))
{
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
}
// dragDrop事件管理器用来在画布容器中，通过dropping来设定图片控件的位置。
private function dragDropHandler(event:DragEvent):void {
Image(event.dragInitiator).x =
Canvas(event.currentTarget).mouseX;
Image(event.dragInitiator).y =
Canvas(event.currentTarget).mouseY;
}
]]>
</mx:Script>
<mx:Panel
title="容器为放置目标示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<!-- 画布为放置目标容器 -->
<mx:Canvas id="v1"
width="100%" height="100%"
borderStyle="solid"
backgroundColor="#FBF4D9"
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);">
<!-- 图片为拖动初始者 -->
<mx:Image id="myimg"
source="@Embed(source='./assets/eek.gif')"
mouseMove="mouseOverHandler(event);"/>
</mx:Canvas>
</mx:Panel>
</mx:Application>
6. 拖放事件管理示例：
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\ListToListShowFeedback.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:"第一列", data:"1"},
{label:"第二列", data:"2"},
{label:"第三列", data:"3"},
{label:"第四列", data:"4"}
]);
secondList.dataProvider = new ArrayCollection([]);
}
private var tempBorderColor:uint;
private var borderColorSet:Boolean = false;
private function dragOverHandler(event:DragEvent):void {
event.preventDefault();
// 调用showDropFeedback(event)来显示放置标记。
event.currentTarget.showDropFeedback(event);
if (event.dragSource.hasFormat("items"))
{
if (borderColorSet == false) {
tempBorderColor =
event.currentTarget.getStyle('borderColor');
borderColorSet = true;
}
// 设定拖动回复的标记，并改变放置目标外框为红色。
event.currentTarget.setStyle('borderColor', 'red');
if (event.ctrlKey) {
DragManager.showFeedback(DragManager.COPY);
return;
}
else if (event.shiftKey) {
DragManager.showFeedback(DragManager.LINK);
return;
}
else {
DragManager.showFeedback(DragManager.MOVE);
return;
}
}
// 标记不能放置。
DragManager.showFeedback(DragManager.NONE);
}
private function dragDropHandler(event:DragEvent):void {
dragExitHandler(event);
}
// 恢复外框的颜色。
private function dragExitHandler(event:DragEvent):void {
event.currentTarget.setStyle('borderColor', tempBorderColor);
borderColorSet = true;
}
]]>
</mx:Script>
<mx:Panel
title="改变放置目标属性示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox id="myHB">
<mx:List id="firstList"
dragEnabled="true"/>
<mx:List id="secondList"
borderThickness="2"
dropEnabled="true"
dragMoveEnabled="true"
dragOver="dragOverHandler(event);"
dragDrop="dragExitHandler(event);"
dragExit="dragExitHandler(event);"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
7.在不同列表类控件之间移动和复制数据示例：
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DandDListToDG.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.collections.IList;
import mx.collections.ArrayCollection;
private function initApp():void {
srcList.dataProvider = new ArrayCollection([
{label:"第一列", data:"1"},
{label:"第二列", data:"2"},
{label:"第三列", data:"3"},
{label:"第四列", data:"4"},
]);
destDG.dataProvider = new ArrayCollection([]);
}
private function dragDropHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("items"))
{
// 定义自处理dragDrop事件。
event.preventDefault();
event.currentTarget.hideDropFeedback(event);
// 得到放置目标。
var dropTarget:DataGrid =
DataGrid(event.currentTarget);
var itemsArray:Array =
event.dragSource.dataForFormat('items') as Array;
var tempItem:Object =
{ label: itemsArray[0].label,
data: itemsArray[0].data,
date: new Date()
};
// 得到在放置目标上的放置位置。
var dropLoc:int = dropTarget.calculateDropIndex(event);
IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);
}
}
]]>
</mx:Script>
<mx:Panel
title="不同类型控件中复制移动数据示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox>
<mx:List id="srcList"
dragEnabled="true"
dragMoveEnabled="true"/>
<mx:DataGrid id="destDG"
dropEnabled="true"
dragDrop="dragDropHandler(event);">
<mx:columns>
<mx:DataGridColumn headerText="名称" dataField="label"/>
<mx:DataGridColumn headerText="数据" dataField="data"/>
<mx:DataGridColumn headerText="日期" dataField="date"/>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Panel>
</mx:Application>
8. 不同类型的非列表类控件之间移动或复制数据示例：
<?xml version="1.0" encoding="utf-8"?>
<!-- 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(source='./assets/eek.gif')]
public var globeImage:Class;
// mouseMove数据管理用来定义图片控件的功能。
private function mouseOverHandler(event:MouseEvent):void
{
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "img");
// 拖动管理器所以图片作为拖动代理。
var imageProxy:Image = new Image();
imageProxy.source = globeImage;
imageProxy.height=10;
imageProxy.width=10;
DragManager.doDrag(dragInitiator, ds, event,
imageProxy, -15, -15, 1.00);
}
// dragEnter事件管理器用来定义放置目标。
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img"))
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
// dragOver事件管理器设定拖放操作为复制还是移动。
// 复制或移动会影响在dragComplete事件管理器中的操作。
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);
}
// dragDrop事件管理器设定图片控件在目标容器中的位置。
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;
var newImage:Image=new Image();
newImage.source = draggedImage.source;
newImage.x = dropCanvas.mouseX;
newImage.y = dropCanvas.mouseY;
dropCanvas.addChild(newImage);
}
}
// dragComplete事件管理器用来完成复制或移动图片。
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>
<mx:Panel
title="不同类型的非列表类控件中复制移动图片示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox width="100%" height="100%">
<mx:Canvas
width="200" height="200"
borderStyle="solid"
backgroundColor="#FFF6D5">
<mx:Image id="myimg"
source="@Embed(source='./assets/eek.gif')"
mouseMove="mouseOverHandler(event);"
dragComplete="dragCompleteHandler(event);"/>
</mx:Canvas>
<mx:Canvas
width="200" height="200"
borderStyle="solid"
backgroundColor="#FEDEF1"
dragEnter="dragEnterHandler(event);"
dragOver="dragOverHandler(event);"
dragDrop="dragDropHandler(event);">
</mx:Canvas>
</mx:HBox>
</mx:Panel>
</mx:Application>