在典型的可视化开发环境中,你能够在应用程序中选中并且拖动一个对象在屏幕中来回移动。 Flex Drag and Drop管理器能够让用户选中一个对象,比如List控件的一个元素,或者一个控件比如Image控件,并且拖动他们跨过一个元素,放到另一个元素中。所有的Flex组件支持拖放操作。Flex在拖放方面对一些控件,比如List,Tree和DataGrid,都有额外的功能支持。
拖放操作主要有3个阶段:开始,拖动中,放下中。
开始阶段
用户通过使用鼠标选中一个组件,或组件中的元素,然后按住鼠标移动组件或元素移动,来发起一个拖放操作。例如,用户用鼠标选择一个List控件的元素,然后按住鼠标左键移动几个像素。这个被选择的组件就叫做“拖动开始点”(drag initiator)。
拖动阶段
当按住鼠标按键,用户在Flex应用程序中移动鼠标。Flex显示一个表示正在拖放的图片,这个图片代表拖放对象,就叫做“拖动代理”。DragSource对象包含被拖动的对象。
放下阶段
当一个用户移动“拖动代理”划过一个Flex组件的时候,这个组件就有可能变成“放下目标”。“放下目标”可以检查“拖动源”,然后决定这个数据是否是一个“放下目标”(drop target)可以接受的格式,如果是,则允许用户把数据放到它的上边。如果不是,那么就不允许放到它上边。
在一个成功的放下操作中,Flex轻易的就可以增加数据到目标中,并且把原数据删除。
在本快速入门中,介绍了在Flex中几种实现拖放操作的方式
使用列表控件拖放
手工增加拖放功能
使用列表控件拖放
几个Flex组件具有支持内置拖放操作功能。他们是DataGrid, HorizontalList, List, Menu, PrintDataGrid, TileList, and Tree 控件.
通过设置dragEnabled属性为true,可以使这些控件作为“拖动开始点”。类似地,通过设置dropEnabled属性为true,可以使这些控件作为“放下目标”。Flex允许通过拖动来移动元素,从dragEnabled控件到一个dropEnabled控件,或者在拖动中按住Control键可以赋值他们。
通过拖放操作复制元素
下边的例子允许你通过拖放,从一个List控件中复制元素到另一个List控件中。你可以多次赋值同一个元素,从“拖动开始点”到“放下目标”。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="365" height="225"
creationComplete="creationCompleteHandler();"
><mx:Script>
<![CDATA[
private function creationCompleteHandler():void
{srclist.dataProvider = ['Reading', 'Skating', 'Movies'];
destlist.dataProvider = [];
}]]>
</mx:Script><mx:Panel title="Select activities" layout="horizontal">
<mx:VBox width="50%"><mx:Label text="Available activities"/>
<!-- Drag initiator -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"/>
</mx:VBox>
<mx:VBox width="50%">
<mx:Label text="Activities I enjoy"/><!-- Drop target -->
<mx:List
id="destlist" width="100%" height="100"
dropEnabled="true"/>
</mx:VBox>
</mx:Panel>
</mx:Application>
结果
通过拖放操作移动元素
默认的时候dragMoveEnable等于false,那么只允许你从过一个List控件复制元素到另一个List控件中。如果你修改该上边的例子,在源List控件中,增加dragMoveEnabled属性,并且设置为true。那么就向下边的例子那样,可以移动和复制元素了。
默认的动作是移动元素,在拖动的过程中按住Control键,可以复制元素。
例子
<!-- Drag initiator -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"dragMoveEnabled="true"
/>
双向拖放功能
你可以允许双向拖放,通过把两个列表的dragEnabled和dropEnabled属性都设置为true。就像下边:
<!-- Both drag initiator and drop target -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"dropEnabled="true"
dragMoveEnabled="true"
/><!-- . . . -->
<!-- Both drag initiator and drop target -->
<mx:List
id="destlist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"dropEnabled="true"
dragMoveEnabled="true"
/>
结果
手工添加拖放功能
想要让非基于list的控件或容器支持拖放操作,必须明确的添加一系列指定的类和方法。使用DragManager,DragSource和DragEvent类来实现拖放操作。
Flex应用程序使用时间来控制拖放操作。
拖动开始事件
当你把一个控制设置为“拖动开始点”,你可以使用mouseDown,mouseMove和dragComplete事件来管理拖放操作。
关于mouseDown和mouseMove事件
mouseDown事件在用户用鼠标选中并且按下鼠标键开始分发。mouseMove时间在鼠标移动的时候开始分发。
下边的例子嵌入了4个欧元硬币(1分,2分,5分,10分)图片,兵器使用Image控件显示他们。在每一个Image控件中,监听mouseMove事件并且定义事件处理器方法,这个方法被命名为dragIt()。在dragIt()方法中,使用事件的currentTarget属性,获得事件源硬币图片的引用,然后吧这个引用放入到drageInitiator这个本地变量中。
下一步,创建一个DragSource实例,并且调用她的addData()方法来保存dragIt方法的value参数。使用字符串"value"来描述value参数的格式。一会,当你创建“放下目标”时,你将使用这个字符串,来检查是否允许一个元素,放到某个组件上。
想要显示一个硬币图片作为用户拖动它的标志,需要创建一个图片实例,这个图片与“拖动开始点”的图片是一样的。把这个图片保存在dragProxy这个本地变量中。
最后,调用DragManager的静态方法doDrag(),并且把图片发生点,拖动源,事件对象,和拖动代理类传送给它,开始拖动操作。
你可以随意拖动硬币,但是在任何地方都放不下它。因为你还没有定义“放下目标”。下一节,将讲述如何定义“放下目标”。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DragAndDropDragInitiatorEvents/index.html"width="500" height="160"
>
<mx:Script>
<![CDATA[import mx.managers.DragManager;
import mx.core.DragSource;
// Embed the various Euro coin images. Images originally
// from Wikipedia (http://en.wikipedia.org/wiki/Euro_coins)
[Embed("assets/1c.png")][Bindable]
public var OneCent:Class;
[Embed("assets/2c.png")][Bindable]
public var TwoCents:Class;
[Embed("assets/5c.png")][Bindable]
public var FiveCents:Class;
[Embed("assets/10c.png")][Bindable]
public var TenCents:Class;private function dragIt(event:MouseEvent, value:uint):void
{// Get the drag initiator component from the event object.
var dragInitiator:Image = event.currentTarget as Image;
// Create a DragSource object.
var dragSource:DragSource = new DragSource();
// Add the data to the object.dragSource.addData(value, 'value');
// Create a copy of the coin image to use as a drag proxy.
var dragProxy:Image = new Image();
dragProxy.source = event.currentTarget.source;
// Call the DragManager doDrag() method to start the drag.DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}]]>
</mx:Script>
<mx:HBox><mx:Image
id="oneCent" source="{OneCent}"
mouseMove="dragIt(event, 1);"/>
<mx:Image
id="twoCents" source="{TwoCents}"
mouseMove="dragIt(event, 2);"/>
<mx:Image
id="fiveCents" source="{FiveCents}"
mouseMove="dragIt(event, 5);"/>
<mx:Image
id="tenCents" source="{TenCents}"
mouseMove="dragIt(event, 10);"/>
</mx:HBox>
</mx:Application>
“放下目标”
一个放下目标可以使用多种事件,最重要的事件是dragEnter,dragDrop和dragExit时间。
dragEnter事件
dragEnter事件在带有“拖动代理(drag proxy)”鼠标从外部进入“放下目标”的时候分发。一个组件要作为“放下目标”必须定义这个事件监听器。在这个监听器中,你可以改变“放下目标”的外观,从而向用户提供一个反馈,表明这个组件可以接受拖动操作。例如你可以在“放下目标”周围画一个框,或者给“放下目标”一个焦点。
dragExit事件
dragExit事件在用户鼠标没有在“放下目标”上放下,而是移除鼠标的时候分发。如果在dragEnter或其他事件中修改了“放下目标”的外观,你可以在这个事件中恢复到正常的外观。
dragDrop事件
dragDrop事件在用户在“放下目标”上放开鼠标的时候分发。你可以使用这个事件监听器向“放下目标”中增加drag的数据。
在下边的例子中,创建一个Box容器担当“放下目标”,并且定义dragEnter,dragExit和dragDrop事件监听器。Box容器包含一个Label控件,用来显示放到Box上的硬币的总和
在dragEnter事件监听器中,检查拖动源对象中是否包含value格式。只有对象包含这个格式才可以被放到这个“放下目标”上。如果包含,给用户一个可视化的反馈,通过变粗Box容器的。通过调用DragManager的acceptDrapDrop方法,告诉DragManager,Box容器要接受这个“拖动开始点”。
在dragExit的事件监听器中,恢复Box的外观以表明“拖动代理”已经不在它上边了。
最后,在drapDrop的事件监听器中,当用户把硬币放到“放下目标”上时获得调用,用硬币的值增加totalValue的值,并且回复Box的外观,以表明放下操作完成。
例子
<?xml version="1.0" encoding="utf-8"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="525" height="270"
viewSourceURL="src/DragAndDropDragDropTargetEvents/index.html"
><mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.containers.Box;
import mx.managers.DragManager;
import mx.core.DragSource;
// Embed the various Euro coin images. Images originally// from Wikipedia (http://en.wikipedia.org/wiki/Euro_coins)
[Embed("assets/1c.png")]
[Bindable]
public var OneCent:Class;
[Embed("assets/2c.png")][Bindable]
public var TwoCents:Class;
[Embed("assets/5c.png")][Bindable]
public var FiveCents:Class;
[Embed("assets/10c.png")][Bindable]
public var TenCents:Class;
[Bindable]private var totalValue:uint;
private function dragIt(event:MouseEvent, value:uint):void
{// Get the drag initiator component from the event object.
var dragInitiator:Image = event.currentTarget as Image;
// Create a DragSource object.
var dragSource:DragSource = new DragSource();
// Add the data to the object.dragSource.addData(value, 'value');
// Create a copy of the coin image to use as a drag proxy.
var dragProxy:Image = new Image();
dragProxy.source = event.currentTarget.source;
// Call the DragManager doDrag() method to start the drag.DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}// Called if the user drags a drag proxy onto the drop target.
private function dragEnterHandler(event:DragEvent):void
{// Get the drop target component from the event object.
var dropTarget:Box=event.currentTarget as Box;
// Accept the drag only if the user is dragging data
// identified by the 'value' format value.if (event.dragSource.hasFormat('value'))
{
// Make the border of the Box thicker to
// visually signal to the user that they can
// drop the coin there.dropTarget.setStyle("borderThickness", 5);
// Accept the drop.
DragManager.acceptDragDrop(dropTarget);
}
}
// Called if the user drags the drag proxy away from the drop target.
private function dragExitHandler(event:DragEvent):void
{// Get the drop target component from the event object.
var dropTarget:Box=event.currentTarget as Box;
// Set the border of the Box to its default value
// to visually indicate that the user is no longer
// over the drop target.revertBoxBorder();
}
// Called if the target accepts the dragged object and the user
// releases the mouse button while over the drop target.
private function dragDropHandler(event:DragEvent):void
{// Get the data identified by the color format from the drag source.
var value:uint = event.dragSource.dataForFormat('value') as uint;// Add the value to the total
totalValue += value;
// Set the border of the Box to its default value
revertBoxBorder();
}
// Helper method to revert the Box's border to a 1 pixel outline.
private function revertBoxBorder():void{
amountDisplay.setStyle("borderThickness", 1);
}
]]>
</mx:Script>
<mx:HBox>
<mx:Image
id="oneCent" source="{OneCent}"
mouseMove="dragIt(event, 1);"/>
<mx:Image
id="twoCents" source="{TwoCents}"
mouseMove="dragIt(event, 2);"/>
<mx:Image
id="fiveCents" source="{FiveCents}"
mouseMove="dragIt(event, 5);"/>
<mx:Image
id="tenCents" source="{TenCents}"
mouseMove="dragIt(event, 10);"/>
</mx:HBox>
<mx:Box
id="amountDisplay"
borderStyle="solid" borderColor="#000000" backgroundColor="#FFFFFF"width="100%" height="100" horizontalAlign="center" verticalAlign="middle"
dragEnter="dragEnterHandler(event);"
dragExit="dragExitHandler(event);"
dragDrop="dragDropHandler(event);">
<mx:Label text="{totalValue + ' pence'}" fontSize="48"/>
</mx:Box>
</mx:Application>
结果