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>