Dragging and dropping items in a Flex Tree control

简介:
The following example shows you how you can reorder nodes in a Flex Tree control by setting the  dragEnabled dropEnabled , and  dragMoveEnabled  properties
<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/11/29/dragging-and-dropping-items-in-a-flex-tree-control/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white" >

    
< mx:XML  id ="xmlDP" >
        
< root >
            
< para  label ="Paragraph 1"  isBranch ="true" >
                
< node  label ="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."   />
                
< node  label ="Cras porttitor nunc a pede."   />
                
< node  label ="Nulla ac magna non risus accumsan egestas."   />
                
< node  label ="Aenean pretium porta felis."   />
                
< node  label ="Sed massa."   />
            
</ para >
            
< para  label ="Paragraph 2"  isBranch ="true" >
                
< node  label ="Pellentesque pretium eros id odio tincidunt lobortis."   />
                
< node  label ="Praesent vitae dolor eget nisl adipiscing pretium."   />
                
< node  label ="Fusce nonummy dignissim risus."   />
                
< node  label ="Nunc sodales, lectus vitae nonummy cursus, augue lectus auctor orci, vel aliquet enim neque vel eros."   />
                
< node  label ="Donec laoreet euismod libero."   />
                
< node  label ="Etiam ut lectus."   />
            
</ para >
            
< para  label ="Paragraph 3"  isBranch ="true" >
                
< node  label ="Maecenas ut nibh eu diam viverra suscipit."   />
                
< node  label ="Pellentesque auctor, turpis vel lobortis suscipit, neque tortor tristique nibh, venenatis suscipit nisl nisl eget magna."   />
                
< node  label ="Donec interdum."   />
                
< node  label ="Praesent diam."   />
            
</ para >
            
< para  label ="Paragraph 4"  isBranch ="true" >
                
< node  label ="Proin nulla."   />
                
< node  label ="Morbi tincidunt, sapien in sollicitudin venenatis, nibh tortor pretium ante, non pharetra urna dolor et libero."   />
                
< node  label ="In malesuada risus at neque."   />
            
</ para >
            
< para  label ="Paragraph 5"  isBranch ="true"   />
        
</ root >
    
</ mx:XML >

    
< mx:Tree  id ="tree"
            dataProvider
="{xmlDP}"
            labelField
="@label"
            showRoot
="false"
            verticalScrollPolicy
="on"
            alternatingItemColors
="[#FFFFFF,#EEEEEE]"
            showScrollTips
="true"
            dragEnabled
="true"
            dropEnabled
="true"
            dragMoveEnabled
="true"
            width
="300"
            rowCount
="6"   />

</ mx:Application >


    本文转自 OldHawk  博客园博客,原文链接:http://www.cnblogs.com/taobataoma/archive/2008/01/11/1034817.html ,如需转载请自行联系原作者


相关文章
|
23天前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。