flex拖动问题

在典型的可视化开发环境中，你能够在应用程序中选中并且拖动一个对象在屏幕中来回移动。??Flex Drag and Drop管理器能够让用户选中一个对象，比如List控件的一个元素，或者一个控件比如Image控件，并且拖动他们跨过一个元素，放到另一个元素中。所有的Flex组件支持拖放操作。Flex在拖放方面对一些控件，比如List,Tree和DataGrid，都有额外的功能支持。

开始阶段

用户通过使用鼠标选中一个组件，或组件中的元素，然后按住鼠标移动组件或元素移动，来发起一个拖放操作。例如，用户用鼠标选择一个List控件的元素，然后按住鼠标左键移动几个像素。这个被选择的组件就叫做“拖动开始点”(drag initiator)。

拖动阶段

当按住鼠标按键，用户在Flex应用程序中移动鼠标。Flex显示一个表示正在拖放的图片，这个图片代表拖放对象，就叫做“拖动代理”。DragSource对象包含被拖动的对象。

放下阶段

当一个用户移动“拖动代理”划过一个Flex组件的时候，这个组件就有可能变成“放下目标”。“放下目标”可以检查“拖动源”，然后决定这个数据是否是一个“放下目标”(drop target)可以接受的格式，如果是，则允许用户把数据放到它的上边。如果不是，那么就不允许放到它上边。

在一个成功的放下操作中，Flex轻易的就可以增加数据到目标中，并且把原数据删除。

通过设置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键，可以复制元素。

移动而不是复制

通过拖放操作移动元素

默认的时候dragMoveEnable等于false，那么只允许你从过一个List控件复制元素到另一个List控件中。如果你修改该上边的例子，在源List控件中，增加dragMoveEnabled属性，并且设置为true。那么就向下边的例子那样，可以移动和复制元素了。
默认的动作是移动元素，在拖动的过程中按住Control键，可以复制元素。

下边的例子允许你通过拖放，从一个List控件中复制元素到另一个List控件中。你可以多次赋值同一个元素，从“拖动开始点”到“放下目标”。

例子

<!-- Drag initiator -->
<mx:List?
??? id="srclist" width="100%" height="100"?
??? allowMultipleSelection="true"????????????????
??? dragEnabled="true"

??? dragMoveEnabled="true"
/>

双向拖放功能

你可以允许双向拖放，通过把两个列表的dragEnabled和dropEnabled属性都设置为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,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,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 + &apos; pence&apos;}" fontSize="48"/>????????
??? </mx:Box>

???? </mx:Application>