flex 经典拖拽可编辑Tree

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" ?? ??? ??? ??? xmlns:s="library://ns.adobe.com/flex/spark" ?? ??? ??? ??? xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)"> ? ?? ? ?? ?<s:layout> ?? ??? ?<s:BasicLayout/> ?? ?</s:layout> ?? ?<fx:Script> ?? ??? ?<![CDATA[ ?? ??? ??? ?import mx.collections.ArrayCollection; ?? ??? ??? ?import mx.events.FlexEvent; ?? ??? ??? ?[Bindable] ?? ??? ??? ? ?? ??? ??? ?private var dataGridProvider:ArrayCollection = new ArrayCollection([{label:"1"},{label:"3"},{label:"4"},{label:"5"}]); ?? ??? ??? ? ?? ??? ??? ?protected function application1_creationCompleteHandler(event:FlexEvent):void ?? ??? ??? ?{ ?? ??? ??? ??? ?// TODO Auto-generated method stub ?? ??? ??? ??? ?var ob:Object=new Object(); ?? ??? ??? ??? ?ob.label="bashao"; ?? ??? ??? ??? ?dataGridProvider.addItem(ob); ?? ??? ??? ??? ?var ob2:Object=new Object(); ?? ??? ??? ??? ?ob.label="bashao2"; ?? ??? ??? ??? ?dataGridProvider.addItem(ob2); ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ?]]> ?? ?</fx:Script> ?? ?<fx:Declarations> ?? ??? ?<!-- 将非可视元素（例如服务、值对象）放在此处 --> ?? ??? ?<fx:XML id="treeData" xmlns=""> ?? ??? ??? ? ?? ??? ??? ?<root> ?? ??? ??? ??? ?<node label="Massachusetts" type="state" data="MA"> ?? ??? ??? ??? ??? ?<node label="Boston" type="city" > ?? ??? ??? ??? ??? ??? ?<node label="Smoke House Grill" type="restaurant" /> ?? ??? ??? ??? ??? ??? ?<node label="Equator" type="restaurant" /> ?? ??? ??? ??? ??? ??? ?<node label="Aquataine" type="restaurant" /> ?? ??? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ??? ?<node label="Grill 23" type="restaurant" /> ?? ??? ??? ??? ??? ?</node> ?? ??? ??? ??? ??? ?<node label="Provincetown" type="city" > ?? ??? ??? ??? ??? ??? ?<node label="Lobster Pot" type="restaurant" /> ?? ??? ??? ??? ??? ??? ?<node label="The Mews" type="restaurant" /> ?? ??? ??? ??? ??? ?</node> ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ?</node> ?? ??? ??? ??? ?<node label="California" type="state" data="CA"> ?? ??? ??? ??? ??? ?<node label="San Francisco" type="city" > ?? ??? ??? ??? ??? ??? ?<node label="Frog Lane" type="restaurant" /> ?? ??? ??? ??? ??? ?</node> ?? ??? ??? ??? ?</node> ?? ??? ??? ??? ? ?? ??? ??? ?</root> ?? ??? ?</fx:XML>?? ? ?? ??? ?<fx:Array id="listData"> ?? ??? ??? ? ?? ??? ??? ?<fx:String>Johnny Rocket's</fx:String> ?? ??? ??? ? ?? ??? ??? ?<fx:String>Jet Pizza</fx:String> ?? ??? ??? ?<fx:String>Steve's Greek</fx:String> ?? ??? ??? ?<fx:String>Sonsie</fx:String> ?? ??? ??? ?<fx:String>The Border Cafe</fx:String> ?? ??? ??? ? ?? ??? ?</fx:Array> ?? ?</fx:Declarations> ?? ?<fx:Script> ?? ??? ?<![CDATA[ ?? ??? ??? ?import mx.controls.Alert; ?? ??? ??? ?import mx.events.DragEvent; ?? ??? ??? ?import mx.managers.DragManager; ?? ??? ??? ?import mx.core.DragSource; ?? ??? ??? ?import mx.core.UIComponent; ?? ??? ??? ?import mx.controls.Tree; ?? ??? ??? ?/** ?? ??? ??? ? * Called as soon as the dragProxy enters the target. You can add logic ?? ??? ??? ? * to determine if the target will accept the drop based on the ?? ??? ??? ? * dragInitiator,the data available in the dragSource. ?? ??? ??? ? * Here the drop is blindly accepted. ?? ??? ??? ? */ ?? ??? ??? ? ?? ??? ??? ?private function onDragEnter( event:DragEvent ) : void ?? ??? ??? ??? ? ?? ??? ??? ?{ ?? ??? ??? ??? ?DragManager.acceptDragDrop(UIComponent(event.currentTarget)); ?? ??? ??? ?} ?? ??? ??? ?/** ?? ??? ??? ? * Called while the dragProxy is over the drop target. You can ?? ??? ??? ? * use this function to determine the type of feedback to show. ?? ??? ??? ? * Since the List is set to allow MOVE (the item is deleted ?? ??? ??? ? * once dropped),different feedback possibilities are given. ?? ??? ??? ? * ?? ??? ??? ? * Also,for this application,the Tree control node the dragProxy is ?? ??? ??? ? * over is selected. As the dragProxy moves,the Tree control's ?? ??? ??? ? * selection changes. ?? ??? ??? ? * ?? ??? ??? ? * For a bit more complication,the drop is being allowed ?? ??? ??? ? * only over nodes whose type is NOT 'state'. ?? ??? ??? ? * The feedback is removed. ?? ??? ??? ? */ ?? ??? ??? ?private function onDragOver( event:DragEvent ) : void ?? ??? ??? ??? ? ?? ??? ??? ?{ ?? ??? ??? ??? ?var dropTarget:Tree = Tree(event.currentTarget); ?? ??? ??? ??? ?var r:int = dropTarget.calculateDropIndex(event); ?? ??? ??? ??? ?tree.selectedIndex = r; ?? ??? ??? ??? ?var node:XML = tree.selectedItem as XML; ?? ??? ??? ??? ?if( node.@type == "state" ) { ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?DragManager.showFeedback(DragManager.NONE); ?? ??? ??? ??? ??? ?return; ?? ??? ??? ??? ?}/*else if(node.@type == "city" ){ ?? ??? ??? ??? ?DragManager.showFeedback(DragManager.MOVE); ?? ??? ??? ??? ?return; ?? ??? ??? ??? ?}*/ ?? ??? ??? ??? ?if (event.ctrlKey) ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?DragManager.showFeedback(DragManager.COPY); ?? ??? ??? ??? ?else if (event.shiftKey) ?? ??? ??? ??? ??? ?DragManager.showFeedback(DragManager.LINK); ?? ??? ??? ??? ?else { ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?DragManager.showFeedback(DragManager.MOVE); ?? ??? ??? ??? ?} ?? ??? ??? ?} ?? ??? ??? ?/** ?? ??? ??? ? * Called when the dragProxy is released ?? ??? ??? ? * over the drop target. The information in the dragSource ?? ??? ??? ? * is extracted and processed. ?? ??? ??? ? * ?? ??? ??? ? * The target node is determined and ?? ??? ??? ? * all of the data selected (the List has allowMultipleSection ?? ??? ??? ? * set) is added. ?? ??? ??? ? */ ?? ??? ??? ?private function onDragDrop( event:DragEvent ) : void ?? ??? ??? ??? ? ?? ??? ??? ?{ ?? ??? ??? ??? ?var ds:DragSource = event.dragSource; ?? ??? ??? ??? ?var dropTarget:Tree = Tree(event.currentTarget); ?? ??? ??? ??? ?var items:Array = ds.dataForFormat("items") as Array; ?? ??? ??? ??? ?var r:int = tree.calculateDropIndex(event); ?? ??? ??? ??? ?tree.selectedIndex = r; ?? ??? ??? ??? ?var node:XML = tree.selectedItem as XML; ?? ??? ??? ??? ?//Alert.show(node.@lable); ?? ??? ??? ??? ?Alert.show(node); ?? ??? ??? ??? ?var p:*; ?? ??? ??? ??? ?// if the selected node has children (it is type==city),?? ??? ??? ??? ? ?? ??? ??? ??? ?// then add the items at the beginning ?? ??? ??? ??? ?if( tree.dataDescriptor.hasChildren(node) ) { ?? ??? ??? ??? ??? ?p = node; ?? ??? ??? ??? ??? ?r = 0; ?? ??? ??? ??? ?} else { ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?p = node.parent(); ?? ??? ??? ??? ?} ?? ??? ??? ??? ?for(var i:Number=0; i < items.length; i++) { ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?var insert:XML = <node />; ?? ??? ??? ??? ??? ?insert.@label = items[i].label; ?? ??? ??? ??? ??? ?insert.@type? = "restaurant"; ?? ??? ??? ??? ??? ?tree.dataDescriptor.addChildAt(p,insert,r+i); ?? ??? ??? ??? ?} ?? ??? ??? ??? ? ?? ??? ??? ?} ?? ??? ??? ?/** ?? ??? ??? ? * Called when the drag operation completes,whether ?? ??? ??? ? * successfully or not. The tree is cleared of its ?? ??? ??? ? * selection. ?? ??? ??? ? */ ?? ??? ??? ?private function onDragComplete( event:DragEvent ) : void ?? ??? ??? ??? ? ?? ??? ??? ?{ ?? ??? ??? ??? ?tree.selectedIndex = -1; ?? ??? ??? ?}?????? ? ?? ??? ?]]> ?? ?</fx:Script> ?? ? ?? ?<mx:Panel x="48" y="125" width="447" height="351" layout="absolute" title="Drag onto Tree">?? ? ?? ??? ?<mx:Tree width="186" left="10" top="10" bottom="10" id="tree" ?? ??? ??? ??? ? labelField="@label" ?? ??? ??? ??? ? dataProvider="{treeData.node}" ?? ??? ??? ??? ? dropEnabled="false" ?? ??? ??? ??? ? dragMoveEnabled="false" ?? ??? ??? ??? ? dragEnter="onDragEnter(event)" ?? ??? ??? ??? ? dragOver="onDragOver(event)" ?? ??? ??? ??? ? dragDrop="onDragDrop(event)" ?? ??? ??? ??? ? editable="true" ?? ??? ??? ??? ? > ?? ??? ??? ? ?? ??? ?</mx:Tree>? ? ?? ??? ?<mx:DataGrid x="291" y="81" height="189" ?? ??? ??? ??? ??? ? dragEnabled="true" ?? ??? ??? ??? ??? ? dragMoveEnabled="true" ?? ??? ??? ??? ??? ? allowMultipleSelection="true" ?? ??? ??? ??? ??? ? dataProvider="{dataGridProvider}" ?? ??? ??? ??? ??? ? dragComplete="onDragComplete(event)"> ?? ??? ??? ? ?? ??? ??? ?<mx:columns> ?? ??? ??? ??? ?<mx:DataGridColumn headerText="Label" dataField="label"/> ?? ??? ??? ??? ? ?? ??? ??? ??? ? ?? ??? ??? ?</mx:columns> ?? ??? ?</mx:DataGrid> ?? ??? ? ?? ??? ?<mx:List width="188" height="206" right="10" bottom="10" id="list" ?? ??? ??? ??? ? allowMultipleSelection="true" ?? ??? ??? ??? ? dataProvider="{listData}" ?? ??? ??? ??? ? dragEnabled="true" ?? ??? ??? ??? ? dragMoveEnabled="true" ?? ??? ??? ??? ? dragComplete="onDragComplete(event)" includeInLayout="false" visible="false"> ?? ??? ??? ? ?? ??? ?</mx:List>?????? ? ?? ??? ?<mx:Text x="229" y="10" text="Drag from the list below to the tree" width="188" height="39"/> ?? ??? ? ?? ??? ?<mx:Label x="229" y="69" text="restaurants"/> ?? ?</mx:Panel>?? ? </s:Application>