Search Flex Components Free

Custom Search

February 6, 2008

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.


Full code after the jump.


View MXML


<?xml version="1.0" encoding="utf-8"?>

<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>




Related Flex Tutorials