10.3.在List 内部进行拖拽操作
10.3.1 问题
你希望在同一个列表类的组件实例内移动和复制数据。
10.3.2 解决办法
使用列表类组件内建的拖拽管理器。
10.3.3 讨论
通过为来自于DragManager 的事件指派事件处理器, 你可以激活任何组件的拖拽能力。尽管你可以手动添加这种支持到列表控件（list controls），但Flex 框架的列表类组件，例如list，Tree 和DataGrid，具有管理拖拽操作的内建支持。列表类的控件（即扩展了mx.controls.listClasses.ListBase 类的控件）具有公共方法和属性去激活这些操作和管理数据，以及在内部处理来自DragManager 的事件。
下面的例子展示了一个list 组件，通过设置dragEnabled 和dropEnabled 属性，它的条目可以在其集合中移动。
例子里的List 控件的内置dragEnabled, dropEnabled 和dragMoveEnabled 属性都被设置为true。本质上，dragEnabled 和dropEnabled 属性允许该组件响应来自DragManager 类的事件。dragMoveEnabled 属性是条目是否能够在list 内移动或复制的标志。缺省地，该值为false，允许增加拖拽源数据到list 里。通过设置dragMoveEnabled 属性为true，当拖拽事件完成时，list 内的条目将会从它先前的位置被移动到鼠标指针所指向的位置。
设置或保留dragMoveEnabled 属性的缺省值为false，将允许复制数据。本例中，在list中执行拖拽操作选择条目时，你会看到一些奇妙的事情。这是因为这些类来自于操作API的集合，它们操作数据，使用唯一标识符（UID）来标识集合中的条目。
当一个条目被增加到列表类控件的dataProvider，私有的方法ListBase.copyItemWithUID被调用并给该拖拽的条目指派一个唯一的标识符。然而，当数据源是一个简单的字符串对象列表时，如本例使用的源于Array 的ArrayCollection，这些条目不会在内部被赋予一个新的ID。所以，在这个例子中当你在list 控件中执行选择操作，你会看到此操作通过UID 在最大索引处选择条目。换言之，如果你首次从一个列表的第五个索引处拖拽复制条目，那么无论何时你再次选择这个条目，列表都会将第五个索引当做正确的选择来渲染这个条目。
为了确保复制的数据是唯一的并且增加到集合中有一个UID，你可以为drag-and-drop 操作增加事件处理，以及在需要的时候复制数据。接下来的例子修改了先前的例子，为lits 控件发出的dragComplete 事件指派了一个事件处理器。
设置dragMoveEnabled 属性为false 来激活复制操作，这个List 实例可以接受一个dragand-drop 操作产生的新条目。内置的属性dragComplete 注册了dropHandler 方法，作为一个拖拽事件完成的事件处理器。在这个事件处理器中，当前被拖拽的条目通过使用条目格式从源数据获取，这些格式在拖拽操作初始时确定。List 的基本索引由List.calculateDropIndex 方法获得，并且用于更新增加到collection 内部的条目。一个条目的深复制被创建并且通过调用ObjectUtil 的copy 方法指派它一个新的唯一标识符，更新collection 里的任何元素都将会触发List 实例里的数据绑定，这些改变会立刻反映在显示里。
你希望在同一个列表类的组件实例内移动和复制数据。
10.3.2 解决办法
使用列表类组件内建的拖拽管理器。
10.3.3 讨论
通过为来自于DragManager 的事件指派事件处理器, 你可以激活任何组件的拖拽能力。尽管你可以手动添加这种支持到列表控件（list controls），但Flex 框架的列表类组件，例如list，Tree 和DataGrid，具有管理拖拽操作的内建支持。列表类的控件（即扩展了mx.controls.listClasses.ListBase 类的控件）具有公共方法和属性去激活这些操作和管理数据，以及在内部处理来自DragManager 的事件。
下面的例子展示了一个list 组件，通过设置dragEnabled 和dropEnabled 属性，它的条目可以在其集合中移动。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="creationHandler();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function creationHandler():void {
var collection:ArrayCollection = newArrayCollection( ['Josh', 'Todd', 'Abey'] );
contactList.dataProvider = collection;
}
]]>
</mx:Script>
<mx:Panel title="Contact List:" width="200" height="200">
<mx:List id="contactList" width="100%" height="100%" dragEnabled="true" dropEnabled="true"
dragMoveEnabled="true" />
</mx:Panel>
</mx:Application>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function creationHandler():void {
var collection:ArrayCollection = newArrayCollection( ['Josh', 'Todd', 'Abey'] );
contactList.dataProvider = collection;
}
]]>
</mx:Script>
<mx:Panel title="Contact List:" width="200" height="200">
<mx:List id="contactList" width="100%" height="100%" dragEnabled="true" dropEnabled="true"
dragMoveEnabled="true" />
</mx:Panel>
</mx:Application>
例子里的List 控件的内置dragEnabled, dropEnabled 和dragMoveEnabled 属性都被设置为true。本质上，dragEnabled 和dropEnabled 属性允许该组件响应来自DragManager 类的事件。dragMoveEnabled 属性是条目是否能够在list 内移动或复制的标志。缺省地，该值为false，允许增加拖拽源数据到list 里。通过设置dragMoveEnabled 属性为true，当拖拽事件完成时，list 内的条目将会从它先前的位置被移动到鼠标指针所指向的位置。
设置或保留dragMoveEnabled 属性的缺省值为false，将允许复制数据。本例中，在list中执行拖拽操作选择条目时，你会看到一些奇妙的事情。这是因为这些类来自于操作API的集合，它们操作数据，使用唯一标识符（UID）来标识集合中的条目。
当一个条目被增加到列表类控件的dataProvider，私有的方法ListBase.copyItemWithUID被调用并给该拖拽的条目指派一个唯一的标识符。然而，当数据源是一个简单的字符串对象列表时，如本例使用的源于Array 的ArrayCollection，这些条目不会在内部被赋予一个新的ID。所以，在这个例子中当你在list 控件中执行选择操作，你会看到此操作通过UID 在最大索引处选择条目。换言之，如果你首次从一个列表的第五个索引处拖拽复制条目，那么无论何时你再次选择这个条目，列表都会将第五个索引当做正确的选择来渲染这个条目。
为了确保复制的数据是唯一的并且增加到集合中有一个UID，你可以为drag-and-drop 操作增加事件处理，以及在需要的时候复制数据。接下来的例子修改了先前的例子，为lits 控件发出的dragComplete 事件指派了一个事件处理器。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="creationHandler();">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
private function creationHandler():void {
var collection:ArrayCollection = new ArrayCollection( ['Josh', 'Todd', 'Abey'] );
contactList.dataProvider = collection;
}
private function dropHandler( evt:DragEvent ):void {
var listItem:Object = evt.dragSource.dataForFormat( "items");
var index:int = contactList.calculateDropIndex(evt);
ArrayCollection( contactList.dataProvider ).setItemAt(ObjectUtil.copy( listItem ),index );
}
]]>
</mx:Script>
<mx:Panel title="Contact List:" width="200" height="200">
<mx:List id="contactList" width="100%" height="100%" dragEnabled="true"
dropEnabled="true" dragMoveEnabled="false" dragComplete="dropHandler(event);" />
</mx:Panel>
</mx:Application>
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
private function creationHandler():void {
var collection:ArrayCollection = new ArrayCollection( ['Josh', 'Todd', 'Abey'] );
contactList.dataProvider = collection;
}
private function dropHandler( evt:DragEvent ):void {
var listItem:Object = evt.dragSource.dataForFormat( "items");
var index:int = contactList.calculateDropIndex(evt);
ArrayCollection( contactList.dataProvider ).setItemAt(ObjectUtil.copy( listItem ),index );
}
]]>
</mx:Script>
<mx:Panel title="Contact List:" width="200" height="200">
<mx:List id="contactList" width="100%" height="100%" dragEnabled="true"
dropEnabled="true" dragMoveEnabled="false" dragComplete="dropHandler(event);" />
</mx:Panel>
</mx:Application>
设置dragMoveEnabled 属性为false 来激活复制操作，这个List 实例可以接受一个dragand-drop 操作产生的新条目。内置的属性dragComplete 注册了dropHandler 方法，作为一个拖拽事件完成的事件处理器。在这个事件处理器中，当前被拖拽的条目通过使用条目格式从源数据获取，这些格式在拖拽操作初始时确定。List 的基本索引由List.calculateDropIndex 方法获得，并且用于更新增加到collection 内部的条目。一个条目的深复制被创建并且通过调用ObjectUtil 的copy 方法指派它一个新的唯一标识符，更新collection 里的任何元素都将会触发List 实例里的数据绑定，这些改变会立刻反映在显示里。
加支付宝好友偷能量挖...
