16.10.拖曳图表中的项目

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.charts.PieChart;
import mx.core.IUIComponent;
import mx.core.DragSource;
import mx.containers.Panel;
import mx.managers.DragManager;
import mx.collections.ArrayCollection;
[Bindable]
private var masterArrColl:ArrayCollection = new ArrayCollection([
{ "name":"C Ronaldo", "sog":128, "goals":20, "games":33 },
{ "name":"A Adebayor", "sog":128, "goals":20, "games":35 },
{ "name":"F Torres", "sog":98, "goals":18, "games":32 },
{ "name":"W Rooney", "sog":89, "goals":17, "games":34 },
{ "name":"D Drogba", "sog":114, "goals":16, "games":31 }]);
[Bindable]
private var subColl:ArrayCollection = new ArrayCollection([
{ "name":"C Ronaldo", "sog":128, "goals":20, "games":33 },
{ "name":"A Adebayor", "sog":128, "goals":20, "games":35
}]);
// Initializes the drag-and-drop operation.
private function
mouseMoveHandler(event:MouseEvent):void {
event.preventDefault();
// Get the drag initiator component from the event object.
//从事件对象中取得拖曳事件初始化组件
var dragInitiator:PieChart = PieChart(event.currentTarget);
// Create a DragSource object.
//创建一个DragSource对象
var ds:DragSource = new DragSource();
//make sure that the chart has a selected item
//确定图表的某个元素是处于选择状态中
if(dragInitiator.selectedChartItem == null) return;
// Call the DragManager doDrag() method to start the drag.
//调用DragManager doDrag()方法开始拖曳事件
DragManager.doDrag(dragInitiator, ds, event);
}
//mouseMoveHandler()方法用于传递dragInitiator,该组件向DragManager.doDrag
//管理器发出拖 动事件和DataSource 对象（该例子没有用到），鼠标事件也被激活。
//mouseMoveHandler()方法
// Called if the target accepts the dragged object and the user
// releases the mouse button while over the Canvas container.
//目标接受dragged对象以及用户在Canvas容器中释放鼠标就调用以下方法：
private function dragDropHandler(event:DragEvent):void {
// Get the selected data from the chart
//取得图表中被选的元素
var index:Number = (event.dragInitiator as PieChart).selectedChartItem.index;
(event.currentTarget as PieChart).dataProvider.addItem((event.dragInitiator as PieChart).dataProvider.getItemAt(index));
(event.dragInitiator as PieChart).dataProvider.removeItemAt(index);
}
//对象是首次添加到dragEvent 的currentTarget 的数据提供器中，就是添加到了饼图上。从
//ragEvent.dragInitiator 中移出的数据(以及相应的对象)，也从饼图中移除了。

]]>
</mx:Script>
<mx:PieChart dataProvider="{subColl}" selectionMode="single"
dragEnabled="true" dropEnabled="true"
mouseMove="mouseMoveHandler(event)"
dragDrop="dragDropHandler(event)">
<mx:series>
<mx:PieSeries field="goals" nameField="name"
labelField="name" labelPosition="callout"
selectable="true"/>
</mx:series>
</mx:PieChart>
<mx:PieChart dataProvider="{masterArrColl}" dragEnabled="true"
dropEnabled="true" selectionMode="single"
mouseMove="mouseMoveHandler(event)"
dragDrop="dragDropHandler(event)">
<mx:series>
<mx:PieSeries field="goals" nameField="name"
labelField="name" labelPosition="callout"
selectable="true"/>
</mx:series>
</mx:PieChart>
</mx:Application>