Flex 3入门教程: 使用 Tree 控件

Tree控件是一个枝和叶节点分层次的机构。树中没每一个条目叫做节点，节点既可以作为枝也可以作为叶。枝节点可以包含叶或枝节点，或者为空。一个叶节点就是一个树的末梢。本快速指南包含一些开发者在使用Treecontrols经常会遇到的一些挑战。
 

使用XMLLISTCOLLECTION 和ARRAYCOLLECTION对象的对比。

你也许想知道，在运行时从远程或本地得来的数据被动态修改的时候，应该使用XMLListCollection对象还是ArrayCollection对象作为Tree空间的数据提供者。

如果你使用的数据源提供成形的XML，并且，你想在Tree控件中操作 XML数据。你应该使用XMLListCollection对象作为数据提供者。当使用MXML标记时，如果数据源是XMLList对象，你应该把它绑定到XMLLsitCollection对象的source属性上，然后把 XMLListCollection对象绑定到Tree控件的dataProvider属性上。

当你想要动态改变对象值时，不要使用XMLList或XML对象直接绑定到Tree控件的dataProvider属性上。当数据源是RPC(远程过程调用)服务的lastResult属性，并且你想使用XML数据，确保RPC组件的resultFormat属性被设置成e4x，当你使用e4x结果格式，最总结果就是XMLList，可以绑定在XMLListCollection对象上。

这里有一个例子。为例数据被动态改变，使用ArrayCollection对象作为Tree控件的数据提供器。当使用MXML标记时，如果你期望动态的改变Arrayl，你不应该把Array对象直接绑定到Tree控件的dataProvider属性上。作为代替，你应该绑定Array到一个ArrayCollection对象的source属性上，然后再把ArrayCollection对象绑定到Tree控件的dataProvider属性上。

当数据源是RPC(远程过程调用)服务的lastResult对象，并且RPC组件的resultFormat属性被成object，你应该使用ArrayUtil.toArray()方法来确保对象是一个Array。然后绑定到ArrayCollection对象上，就像下边的例子所示：

 

1. <mx:ArrayCollection
2.     id="employeeAC"
3.     source= "{ArrayUtil.toArray(employeeSrv.lastResult.employees.employee)}"/>

在运行时增加和删除叶子节点

你可以在运行时为Tree控件增加或删除叶子节点。下边的例子包含的代码来实现这种改变。这个程序使用预定义的枝和叶来初始化，表现公司部门和员工。你可以向任意枝节点增加叶节点在运行时。你也可以删除预定义的叶节点和你在运行时增加的节点。

在这个例子中的XML包含两种不同的元素名字，department和employee。Tree控件的label函数，决定根据元素的类型应该显示那些文本。它使用了E4X语法来返回department的title，或者employee的name。然后，这些语法在addEmployee()和removeEmployee()中会用到。

为了增加员工到业务部门，addEmployee()方法使用E4X语法，通过title属性的值获得业务部门的节点，并把它保存到XMLList类型的变量dept中。然后，通过调用dept.appendChild()方法向操作节点添加子结点。remove方法保存当前被选择的元素到变量node中，node的类型是XML。调用node.localName()方法确定被选择的元素是否是employee节点。如果是employee节点，删除它。

例子

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">
3.    
4.     <mx:Script>
5.         <![CDATA[            import mx.collections.XMLListCollection;
6.            
7.             [Bindable]
8.             private var company:XML = 
9.               <list>
10.                 <department title="Finance" code="200">
11.                     <employee name="John H"/> 
12.                     <employee name="Sam K"/>
13.                 </department>
14.                 <department title="Operations" code="400"> 
15.                     <employee name="Bill C"/>
16.                     <employee name="Jill W"/>
17.                 </department>                   
18.                 <department title="Engineering" code="300"> 
19.                     <employee name="Erin M"/>
20.                     <employee name="Ann B"/>
21.                 </department>                               
22.               </list>;
23.            
24.             [Bindable] 
25.             private var companyData:XMLListCollection = new XMLListCollection(company.department);
26.            
27.             private function treeLabel(item:Object):String
28.             { 
29.                 var node:XML = XML(item);
30.                 if( node.localName() == "department" ) 
31.                     return node.@title;
32.                 else
33.                     return node.@name;
34.             }
35.             private function addEmployee():void 
36.             {
37.                 var newNode:XML = <employee/>;
38.                 newNode.@name = empName.text;
39.                 var dept:XMLList =company.department.(@title == "Operations");
40.                 if( dept.length() > 0 ) { 
41.                     dept[0].appendChild(newNode);
42.                     empName.text = "";
43.                 }
44.             } 
45.             private function removeEmployee():void
46.             {
47.                 var node:XML = XML(tree.selectedItem);
48.                 if( node == null ) return;
49.                 if( node.localName() != "employee" ) return;
50.            
51.                 var children:XMLList = XMLList(node.parent()).children();
52.                 for(var i:Number=0; i < children.length(); i++) { 
53.                     if( children[i].@name == node.@name ) {
54.                         delete children[i];
55.                     } 
56.                 }
57.             }
58.         ]]>
59.     </mx:Script>
60.    
61.     <mx:Tree id="tree" top="72" left="50" dataProvider="{companyData}"
62.         labelFunction="treeLabel"
63.          height="224" width="179"/> 
64.     <mx:HBox>       
65.         <mx:Button label="Add Operations Employee" click="addEmployee()"/><mx:TextInput id="empName"/> 
66.     </mx:HBox>
67.     <mx:Button label="Remove Selected Employee" click="removeEmployee()"/>   
68. </mx:Application>

 提示：可以通过右键flash查看官方源文件

在运行时添加一个空的枝节点

可以在运行时向Tree控件添加空的枝节点。下边的例子展示了通过数据提供器(data provider)API和数据描述器(data descriptor )API添加枝节点。通常，添加枝节点的首选途径是通过数据提供器(data provider)API。

addEmptyBranthDP()方法通过数据提供器API向使用XML数据提供器的Tree组件增加一个空节点，这个方法为新节点创建一个XML类型的变量，并且设置这个节点的isBranch属性为true来创建一个枝节点。然后这个方法调用Tree控件的dataProvider.addItemAt()方法来向Tree控件的数据提供器增加新的元素。

addEmptyBranchDP2()方法通过数据提供器API向使用对象数据提供器的Tree组件增加一个空节点，这个方法使用children属性创建一个新的对象，使用children属性能够确保isBranch()方法返回true。然后，这个方法调用Tree控件的dataProvider.addItemAt()方法来向Tree控件的数据提供器增加新的对象。

addEmptyBranchDD()方法通过数据描述器(data descripter)API。这个方法创建一个XML类型的变量，并且设置isBranch属性为true来创建一个枝节点。然后，这个方法调用Tree控件的dataDescriptor.addChildAt()方法来向Tree控件的数据描述器添加一个新的子节点。

例子

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">    <mx:Script>
3.         <![CDATA[ 
4.             [Bindable]
5.             private var dataX:XML =
6.                 <item label="Top"> 
7.                 <item label="Child One"/>
8.                 <item label="Child Two" />
9.             </item>;
10.        
11.             [Bindable] 
12.             private var dataObj:Object =
13.                 [{label:"Top", children:
14.                 [ 
15.                 {label:"Child One"}, {label: "Child Two"}
16.                 ] 
17.                 }];
18.        
19.             // Adding a branch by going through the Tree control's dataProvider. This is
20.             // the preferred method.
21.             // Toggling the isBranch attribute to true causes DefaultDataDescriptor.isBranch()
22.             // to return true and the Tree treats the node as a branch.
23.             private function addEmptyBranchDP():void 
24.             {
25.                 var newNode:XML = <item label='Middle' isBranch="true"></item>;
26.                 xmlBound2Tree.dataProvider.addItemAt(newNode, 1);
27.             } 
28.        
29.             // For an object graph, the key point is that the children property needs to be defined,
30.             // even if it is empty.
31.             // This causes isBranch() to return true and the Tree treats the new node as a branch.
32.             private function addEmptyBranchDP2():void
33.             { 
34.                 var newObj:Object = {label:"Middle", children:[]};
35.                 objGraphBound2Tree.dataProvider.addItemAt(newObj, 1);
36.             } 
37.        
38.             // Adding a branch by going through the Tree control's dataDescriptor.
39.             private function addEmptyBranchDD():void
40.             {
41.                 var newNode:XML = <item label='Child 4' isBranch="true"></item>;
42.                 xmlBound2Tree.dataDescriptor.addChildAt(dataX, newNode, 2, dataX);
43.             } 
44.           ]]>
45.     </mx:Script> 
46.     <mx:Label text="Tree with XML data"/>
47.     <mx:Tree id="xmlBound2Tree" dataProvider="{dataX}" labelField="@label" showRoot="true" width="200"/> 
48.     <mx:Button label="Add Empty Branch through the dataProvider" click="addEmptyBranchDP();"/>
49.     <mx:Button label="Add Empty Branch through the dataDescriptor" click="addEmptyBranchDD();"/> 
50.     <mx:Spacer height="10"/>
51.     <mx:Label text="Tree with object data"/>
52.     <mx:Tree id="objGraphBound2Tree" dataProvider="{dataObj}" width="200"/> 
53.     <mx:Button label="Add Empty Branch through the dataProvider" click="addEmptyBranchDP2();"/>   
54. </mx:Application>

 

结果

打开树到指定的节点
 

默认的，Tree控件在初始化后是收缩的，你也许不确定如何初始化控件时展开数，并且选定指定的节点。下边的例子，展示了如何实现它。在这个程序中，initTree()方法，在Tree控件被创建后调用。这个方法展开Tree控件的根节点，并且设置selectedIndex属性为指定节点的索引号。

1. <?xml version="1.0"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">    <mx:Script>
3.         <![CDATA[
4.             import Flash.events.*;
5.             import mx.events.*;
6.             import mx.controls.*;
7.             private function initTree():void { 
8.                 XMLTree1.expandItem(MailBox.getItemAt(0), true);
9.                 XMLTree1.selectedIndex = 2;
10.             }
11.         ]]> 
12.     </mx:Script> 
13.     <mx:Tree id="XMLTree1" width="150" height="170"
14.              labelField="@label" creationComplete="initTree();"> 
15.         <mx:XMLListCollection id="MailBox">
16.             <mx:XMLList>
17.                 <node label="Mail" data="100"> 
18.                     <node label="Inbox" data="70"/>
19.                     <node label="Personal Folder" data="10"> 
20.                         <node label="Business" data="2"/>
21.                         <node label="Demo" data="3"/> 
22.                         <node label="Saved Mail" data="5" />
23.                     </node>
24.                     <node label="Sent" data="15"/> 
25.                     <node label="Trash" data="5"/>
26.                  </node>
27.             </mx:XMLList>
28.         </mx:XMLListCollection> 
29. </mx:Tree>
30. </mx:Application>

结果

读取多节点名XML文档

你可以从具有多个节点名字的XML文档中组装Tree 控件。下边的例子实现了这个功能。Tree控件的数据提供者是一个XMLListCollection，它组装自一个包含folder和Pfolder元素的XMLList。Tree控件的labelField属性被设置为label属性，不管元素叫什么名字，这个属性对XMLList中的所有属性都是公共的。
 

例子

 

1. <?xml version="1.0"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">
3.     <mx:Tree id="tree1" dataProvider="{MailBox}" labelField="@label" showRoot="true" width="160"/>
4.     <mx:XMLListCollection id="MailBox" source="{Folders}"/>
5.      <mx:XMLList id="Folders">
6.         <folder label="Mail">
7.             <folder label="INBOX"/>
8.             <folder label="Personal Folder">
9.                 <Pfolder label="Business" />
10.                 <Pfolder label="Demo" /> 
11.                 <Pfolder label="Saved Mail" /> 
12.             </folder>
14.             <folder label="Sent" />
15.             <folder label="Trash" />
16.         </folder>
17.     </mx:XMLList>    
18. </mx:Application>

结果

当数据提供器更新时保持Tree控件打开

默认地，当数据提供器更新数据时Tree控件收缩。下边的例子展示了当数据提供器更新时保持Tree控件打开的方法。
在这个应用程序中，当一个用户单击Button控件时changeProvider()方法更新数据提供器。通常，这会导致Tree控件收缩。然而，Tree控件的渲染事件处理器，renderTree()方法，放置收缩的发生。当changerProvider()方法被调用，当前状态是打开的元素被保存到对象open变量中。当数据被刷新时，被命名为refreshData的Boolean类型的变量被置为true。renderTree()方法调用Tree控件的invalidateList()方法来刷新树的行。然后置refreshDate属性为false，并且重置Tree控件的打开元素属性为open对象变量，这个变量在刷新前就包含了状态是打开的元素。

例子

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="initTree()" viewSourceURL="srcview/index.html">
4.     <mx:Script>
5.         <![CDATA[
6.             [Bindable]
7.             public var open:Object = new Object();
8.             [Bindable]
10.             public var refreshData:Boolean = false;
11.             [Bindable]
12.             public var switchObj:Object = new Object();
13.             [Bindable]
15.             public var firstObj:Object = new Object();
16.             [Bindable]
18.             public var firstObj1:Object = new Object();
19.             [Bindable]
21.             public var firstObj2:Object = new Object();
22.             [Bindable]
24.             public var provider:String = "firstObj";
26.             private function initTree():void
28.             {
30.                 firstObj = new Object();
31.                 firstObj.label = "Foods";
32.                 firstObj.children = new Array();
33.                 firstObj1.label = "Fruits";
34.                 firstObj1.children = new Array();
35.                 firstObj2.label = "Oranges";
36.                 firstObj1.children[0] = firstObj2;
37.                 firstObj.children[0] = firstObj1;
38.                 switchObj = firstObj;
39.             }
41.             public function changeProvider():void
42.             {
43.                 open = SampleTree.openItems;
44.                 refreshData = true;
45.                 if (provider == "firstObj")
47.                 {
48.                     provider = "switchObj";
49.                     SampleTree.dataProvider = switchObj;
50.                 }
51.                 else
53.                 {
54.                     provider = "firstObj";
55.                     SampleTree.dataProvider = firstObj;
56.                 }
57.             }
59.             public function renderTree():void{
60.                 if(refreshData){
62.                     // Refresh all rows on next update.
63.                     SampleTree.invalidateList();
64.                     refreshData = false;
65.                     SampleTree.openItems = open;
66.                     // Validate and update the properties and layout
67.                     // of this object and redraw it, if necessary.
68.                     SampleTree.validateNow();
69.                 }
71.             }
72.         ]]>
73.     </mx:Script>
74.     <mx:Tree id="SampleTree" render="renderTree()" width="250" dataProvider="{firstObj}" labelField="label" />
76.     <mx:Button label="Change Data Provider" click="changeProvider()"/>
77. </mx:Application>

结果

项和一个树控件拖放
 
拖拽元素到Tree控件，和从Tree控件拖拽出元素创建一个应用程序，实现拖拽元素从Tree控件中，或到Tree控件是令人畏惧的，很明显，因为需要大量的事件处理逻辑。本节提供2个例子，来示范实现这2种功能的技术。从Tree控件中拖拽出元素下边的例子展示如何从Tree控件中拖拽元素到DataGrid控件中。Tree控件的数据提供器是XML对象。通过拖拽事件处理方法前的注释可以使你读懂整个应用程序。

例子

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
4.     <mx:Script>
5.         <![CDATA[
6.             import mx.controls.Alert;
7.             import mx.controls.Label;
8.             import mx.controls.List;
9.             import mx.collections.ArrayCollection;
10.             import mx.core.DragSource;
11.             import mx.controls.Tree;
12.             import mx.controls.DataGrid;
13.             import mx.controls.listClasses.ListBase;
14.             import mx.events.DragEvent;
15.             import mx.containers.Canvas;
16.             import mx.managers.DragManager;
17.             import mx.core.UIComponent;
18.         
19.             [Bindable]
21.             private var dataGridProvider:ArrayCollection = new ArrayCollection();
22.             /**
23.              * Handles the dragEnter event on the DataGrid control.
24.              * If the dragInitiator is the Tree control, then only nodes of type "restaurant"
25.              * are permitted to be dropped.
26.              * Here you can see that by examining the dragSource you can determine if
27.              * the control should accept the drop. The DataGrid control would not
28.              * know how to treat a branch+children from the Tree control, so only leaf (restaurant)
29.              * nodes are accepted.
30.              */
32.             private function onDragEnter( event:DragEvent ) : void
34.             {            
35.                 if( event.dragInitiator is Tree ) {
36.                     var ds:DragSource = event.dragSource;
37.                     if( !ds.hasFormat("treeItems") ) return;     // no useful data
39.                     var items:Array = ds.dataForFormat("treeItems") as Array;
40.                     for(var i:Number=0; i < items.length; i++) {
42.                         var item:XML = XML(items[i]);
43.                         if( item.@type != "restaurant" ) return; // not what we want
45.                     }
46.                 } 
47.               // If the Tree control passes or the dragInitiator is not a Tree control,
48.              // accept the drop.
49.             DragManager.acceptDragDrop(UIComponent(event.currentTarget)); 
50.             }        
51.             /**
52.              * Handles the dragOver event on the DataGrid control.
53.              * If the dragInitiator is the Tree control, only copy is allowed. Otherwise, a move
54.              * or link can take place from the List control.
55.              */
57.             private function onDragOver( event:DragEvent ) : void
59.             {
60.                 if( event.dragInitiator is Tree ) {
61.                     DragManager.showFeedback(DragManager.COPY);
62.                 } else {
64.                     if (event.ctrlKey)
65.                     DragManager.showFeedback(DragManager.COPY);
66.                     else if (event.shiftKey)
68.                         DragManager.showFeedback(DragManager.LINK);
69.                     else {
70.                         DragManager.showFeedback(DragManager.MOVE);
71.                     }
73.                 }
74.             }        
75.             /**
76.              * Handles the dragExit event on the drop target and just hides the 
77.              * the drop feedback.
78.              */
79.             private function onDragExit( event:DragEvent ) : void
81.             {
82.                 var dropTarget:ListBase=ListBase(event.currentTarget);   
83.             dropTarget.hideDropFeedback(event);
84.             }
86.             /**
87.              * Handles the dragDrop event on the DataGrid when the 
88.              * drag proxy is released. 
89.              */
90.             private function onGridDragDrop( event:DragEvent ) : void
92.             {
93.                 var ds:DragSource = event.dragSource;
94.                 var dropTarget:DataGrid = DataGrid(event.currentTarget);
95.                 var arr:Array;
96.                 if( ds.hasFormat("items") ) {
98.                     arr = ds.dataForFormat("items") as Array;
99.                 } else if( ds.hasFormat("treeItems") ) {
101.                     arr = ds.dataForFormat("treeItems") as Array;
102.                 }
103.                 for(var i:Number=0; i < arr.length; i++) {
105.                     var node:XML = XML(arr[i]);
106.                     var item:Object = new Object();
107.                     item.label = node.@label;
108.                     item.type  = node.@type;
109.                     dataGridProvider.addItem(item);
110.                 }
112.                 onDragExit(event); 
113.             }
114.             /**
115.             * Intercepts the dragComplete event on the Tree control
116.             * and prevents the default behavior from happening. This is necessary
117.             * if the item being dragged from the Tree control is dropped on a non-Tree
118.             * object, such as the DataGrid.
119.             */
120.             private function onTreeDragComplete(event:DragEvent):void {
122.                 event.preventDefault();
123.             }        
124.             /**
125.             * Selects all of the items in the List if Ctrl+A is picked when the List control
126.             * has focus.
127.             */
128.             private function selectAllMaybe( event:KeyboardEvent ) : void
130.             {
131.                 if( event.ctrlKey && event.keyCode == 65 ) {
133.                     var l:List = List(event.currentTarget);
134.                     var allItems:Array = new Array(l.dataProvider.length);
135.                     for(var i:Number=0; i < allItems.length; i++) {
137.                         allItems[i] = i;
138.                     }
139.                     l.selectedIndices = allItems;
140.                 }
142.             }
143.         ]]>
144.     </mx:Script>
145.     <mx:XML id="treeData" xmlns="">
146.         <root>
148.             <node label="Massachusetts" type="state" data="MA">
149.                 <node label="Boston" type="city" >
150.                     <node label="Smoke House Grill" type="restaurant" />
151.                     <node label="Equator" type="restaurant" />
152.                     <node label="Aquataine" type="restaurant" />
153.                     <node label="Grill 23" type="restaurant" />
155.                 </node>
156.                 <node label="Provincetown" type="city" >
157.                     <node label="Lobster Pot" type="restaurant" />
158.                     <node label="The Mews" type="restaurant" />
159.                 </node>
160.             </node>
162.             <node label="California" type="state" data="CA">
163.                 <node label="San Francisco" type="city" >
164.                     <node label="Frog Lane" type="restaurant" />
165.                 </node>
166.             </node>
167.         </root>
169.     </mx:XML>
170.         
171.     <mx:Label x="34" y="40" text="Drag items from this Tree"/>
172.     <mx:Label x="34" y="55" text="(items are copied)"/>
174.     <mx:Tree x="34" y="81" width="181" height="189"
175.         dataProvider="{treeData.node}"
176.         labelField="@label"
177.         dropEnabled="false"
178.         dragEnabled="true"
179.         dragComplete="onTreeDragComplete(event)"
180.         dragMoveEnabled="false"
181.         />
183.     <mx:Label x="291" y="55" text="Drop items from Tree here"/>
184.     <mx:DataGrid x="291" y="81" height="189"
185.         dragEnabled="true"
186.         dataProvider="{dataGridProvider}"
187.         dragEnter="onDragEnter(event)"
188.         dragOver="onDragOver(event)"
189.         dragDrop="onGridDragDrop(event)"
190.         dragExit="onDragExit(event)">
192.         <mx:columns>
193.             <mx:DataGridColumn headerText="Label" dataField="label"/>
194.             <mx:DataGridColumn headerText="Type" dataField="type"/>
196.         </mx:columns>
197.     </mx:DataGrid>
198. </mx:Application>

 

树控件拖放

下面的示例演示如何将项从列表控件拖到树控件。 树数据提供程序是XML对象。

例子

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3.     <mx:Script>
4.         <![CDATA[
6.             import mx.events.DragEvent;
7.             import mx.managers.DragManager;
8.             import mx.core.DragSource;
9.             import mx.core.UIComponent;
10.             import mx.controls.Tree;
11.             /**
12.              * Called as soon as the dragProxy enters the target. You can add logic
13.              * to determine if the target will accept the drop based on the
14.              * dragInitiator, the data available in the dragSource.
15.              * Here the drop is blindly accepted.
16.              */
18.             private function onDragEnter( event:DragEvent ) : void
20.             {
21.                 DragManager.acceptDragDrop(UIComponent(event.currentTarget));
22.             }
23.             /**
24.              * Called while the dragProxy is over the drop target. You can
25.              * use this function to determine the type of feedback to show.
26.              * Since the List is set to allow MOVE (the item is deleted
27.              * once dropped), different feedback possibilities are given.
28.              *
29.              * Also, for this application, the Tree control node the dragProxy is
30.              * over is selected. As the dragProxy moves, the Tree control's
31.              * selection changes.
32.              *
33.              * For a bit more complication, the drop is being allowed
34.              * only over nodes whose type is NOT 'state'.
35.              * The feedback is removed.
36.              */
37.             private function onDragOver( event:DragEvent ) : void
39.             {
40.                 var dropTarget:Tree = Tree(event.currentTarget);
41.                 var r:int = dropTarget.calculateDropIndex(event);
42.                 tree.selectedIndex = r;
43.                 var node:XML = tree.selectedItem as XML;
44.                 if( node.@type == "state" ) {
46.                     DragManager.showFeedback(DragManager.NONE);
47.                     return;
48.                 }
49.                 if (event.ctrlKey)
51.                     DragManager.showFeedback(DragManager.COPY);
52.                 else if (event.shiftKey)
53.                     DragManager.showFeedback(DragManager.LINK);
54.                 else {
56.                     DragManager.showFeedback(DragManager.MOVE);
57.                 }
58.             }
59.             /**
60.              * Called when the dragProxy is released
61.              * over the drop target. The information in the dragSource
62.              * is extracted and processed.
63.              *
64.              * The target node is determined and 
65.             * all of the data selected (the List has allowMultipleSection
66.             * set) is added.
67.              */
68.             private function onDragDrop( event:DragEvent ) : void
70.             {
71.                 var ds:DragSource = event.dragSource;
72.                 var dropTarget:Tree = Tree(event.currentTarget);
73.                 var items:Array = ds.dataForFormat("items") as Array;
74.                 var r:int = tree.calculateDropIndex(event);
75.                 tree.selectedIndex = r;
76.                 var node:XML = tree.selectedItem as XML;
77.                 var p:*;
78.                 // if the selected node has children (it is type==city),
80.                 // then add the items at the beginning
81.                 if( tree.dataDescriptor.hasChildren(node) ) {
82.                     p = node;
83.                     r = 0;
84.                 } else {
86.                     p = node.parent();
87.                 }
88.                 for(var i:Number=0; i < items.length; i++) {
90.                     var insert:XML = <node />;
91.                     insert.@label = items[i];
92.                     insert.@type  = "restaurant";
93.                     tree.dataDescriptor.addChildAt(p, insert, r+i);
94.                 }
96.             }
97.             /**
98.              * Called when the drag operation completes, whether 
99.              * successfully or not. The tree is cleared of its
100.              * selection.
101.              */
102.             private function onDragComplete( event:DragEvent ) : void
104.             {
105.                 tree.selectedIndex = -1;
106.             }        
107.         ]]>
108.     </mx:Script>    
109.     <mx:XML id="treeData" xmlns="">
111.         <root>
112.             <node label="Massachusetts" type="state" data="MA">
113.                 <node label="Boston" type="city" >
114.                     <node label="Smoke House Grill" type="restaurant" />
115.                     <node label="Equator" type="restaurant" />
116.                     <node label="Aquataine" type="restaurant" />
118.                     <node label="Grill 23" type="restaurant" />
119.                 </node>
120.                 <node label="Provincetown" type="city" >
121.                     <node label="Lobster Pot" type="restaurant" />
122.                     <node label="The Mews" type="restaurant" />
123.                 </node>
125.             </node>
126.             <node label="California" type="state" data="CA">
127.                 <node label="San Francisco" type="city" >
128.                     <node label="Frog Lane" type="restaurant" />
129.                 </node>
130.             </node>
132.         </root>
133.     </mx:XML>    
134.     <mx:Array id="listData">
135.         <mx:String>Johnny Rocket's</mx:String>
137.         <mx:String>Jet Pizza</mx:String>
138.         <mx:String>Steve's Greek</mx:String>
139.         <mx:String>Sonsie</mx:String>
140.         <mx:String>The Border Cafe</mx:String>
142.     </mx:Array>    
143.     <mx:Panel x="48" y="125" width="447" height="351" layout="absolute" title="Drag onto Tree">    
144.         <mx:Tree width="186" left="10" top="10" bottom="10" id="tree"
145.             labelField="@label"
146.             dataProvider="{treeData.node}"
147.             dropEnabled="false"
148.             dragMoveEnabled="false"
149.             dragEnter="onDragEnter(event)"
150.             dragOver="onDragOver(event)"
151.             dragDrop="onDragDrop(event)">
153.         </mx:Tree>        
154.         <mx:List width="188" height="206" right="10" bottom="10" id="list"
155.             allowMultipleSelection="true"
156.             dataProvider="{listData}"
157.             dragEnabled="true"
158.             dragMoveEnabled="true"
159.             dragComplete="onDragComplete(event)">
161.         </mx:List>        
162.         <mx:Text x="229" y="10" text="Drag from the list below to the tree" width="188" height="39"/>
164.         <mx:Label x="229" y="69" text="restaurants"/>
165.     </mx:Panel>    
166. </mx:Application>

 结果