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.
<?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>
View source is enabled in the following example.
One thing to note about the tree is that it is really just a list in which items are displayed. What that means is, you can’t really drop somthing “into” folder unless the folder is open. Even in that case the user experience isn’t quite right. So try moving everything out of one of the folders and then collapse that empty folder. If you drop something “on” the folder, it actually winds up between the target folder and the one below or above. This is indicated by the black line showing up as you move the mouse over the folders. If you “open” the folder (the only way to tell it is open is by the arrow) and then try it, you end up with an additional drop zone that is basically the bottom half of the opened, empty folder. This is also indicated by the black lines position.
It would be better if the middle section of any item could always be the drop zone for “add to this folder” and the top and bottom edges could be for dropping above or below respectively.
I’m doing a app ’bout stocks and I wonder how to get the current xml distribution after a dragAndDrop event.ie:
Before:
After:–I move folder tres into folder uno–
I’m trying to get the info via dirTree.dataProvider but don’t get anything, and my XML stills the same.thanks
PD.I bind my xml file to the Tree in the script side…[Bindable]public var xmlFile:XML;
and in the –mxml–.
Before:
uno
uno-uno
uno-dos
uno-tres
dos
tres
cuatro
After:
uno
tres
uno-uno
uno-dos
uno-tres
dos
tres
cuatro
this is but in a xml style