Tree控件的Drag&Drop

最新推荐文章于 2024-04-26 09:59:10 发布

原创最新推荐文章于 2024-04-26 09:59:10 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tree #string #datagrid #object #list #encoding

Flex 专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何在Flex应用中实现Tree控件的拖放（Drag&Drop）功能，通过创建DataVO对象存储数据，并在DataGrid中接收并显示拖放的节点。在拖放过程中，对拖进的节点进行条件判断，只允许特定类型的节点被接受。

List控件之间实现DragDrop比较简单，只要设置dragEnable，dropEnable就可以在两个List控件之间随意的拖拽Item了。但是Tree控件有些不同。

以下为把一个Item从一个Tree控件拖到DataGrid中的示例：
TreeDrag.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import vo.DataVO;
            import mx.core.DragSource;
            import mx.core.UIComponent;
            import mx.managers.DragManager;
            import mx.events.DragEvent;
            import mx.collections.ArrayCollection;
            // 创建结构化的对象来作为Tree的dataProvider
            [Bindable]
            private var treeObject:Object = {label:"Sections", 
                children:[
                    {label:"Node1", data:"n1"}, 
                    {label:"Node2", data:"n2"}, 
                    {label:"Node3", data:"n3"},
                    {label:"Node4", children:[
                        {label:"subNode1", data:"sn1"}, 
                        {label:"subNode2", data:"sn2"}
                    ]}
                ]}; 
            
            [Bindable]
            private var sections:ArrayCollection = new ArrayCollection();
            
            // Drag一个Item进入控件时触发该事件
            private function onDragEnter(event:DragEvent):void {
                var ds:DragSource = event.dragSource;
                // arr中为Drag过来的数据，dataForFormat必须使用"treeItems"，这点跟List控件不同
                var arr:Array = ds.dataForFormat("treeItems") as Array;
                
                // 判断当前Item不含子节点时，使控件接受DragDrop
                if(arr[0].label != "Sections" && arr[0].label != "Node4") {
                    DragManager.acceptDragDrop(UIComponent(event.currentTarget));
                }
            }
            
            // 设置DragDrop时的图标
            private function onDragOver(event:DragEvent):void {
                DragManager.showFeedback(DragManager.COPY);
            }
            
            // Item被Drop时，把Item数据加入到显示结果用的ArrayCollection中
            private function onDragDrop(event:DragEvent):void {
                var ds:DragSource = event.dragSource;
                var arr:Array = ds.dataForFormat("treeItems") as Array;
                
                for(var i:int=0; i<arr.length; i++) {
                    var obj:Object = arr[i];
                    var data:DataVO = new DataVO(obj.label.toString(), obj.data.toString());
                    sections.addItem(data);
                }
            }
        ]]>
    </mx:Script>
    
    <mx:Tree dataProvider="{treeObject}" 
        width="200" height="250" 
        dragEnabled="true" dropEnabled="false"/>
        
    <mx:DataGrid id="sectionsGrid" width="200" horizontalScrollPolicy="auto" dataProvider="{sections}"
        dragEnter="onDragEnter(event)"  
        dragOver="onDragOver(event)" 
        dragDrop="onDragDrop(event)">
        <mx:columns>
            <mx:DataGridColumn headerText="Section" dataField="label" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

vo/DataVO.as

package vo {
    [Bindable]
    public class DataVO {
        public var label:String = "";
        public var data:String = "";
        
        public function DataVO(_label:String, _data:String) {
            this.label = _label;
            this.data = _data;
        }
    }
}