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"?>
<!-- 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.

6 thoughts on “Dragging and dropping items in a Flex Tree control

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

  2. 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–.

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

  4. Hi,

    I am working on something where I have to drag from one tree to another and then send the data that was moved to php so that I can update a database with that information.

    How would I be able to isolate the data that was changed by dragging from one tree to another?

    Thanks!

  5. Hi!

    I would like to dragging without any special cursor (without text and icon of tree item), I’d like to see only default cursor.

    Is it possible?

    Thanks in advance!

Comments are closed.