Truespire

Recently, I needed to develop a drag-and-drop feature between two lists using Adobe Flex 3. As a learning experience, I built an example application to experiment with the best approach to how this is done. This post will briefly describe my solution with the source code included.

I named the example application the Dual List Manager.

• Demo The Example Application
• View the Source Code:
  Visit the example, right click on the application and select ‘View Source’
• Download the Source Code
  Please Note: The application theme/skin and its associated graphics are not included for licensing reasons.

Flex Drag & Drop Basics

The List component already supports drag and drop by default, so at a minimum, all one has to do is enable dragEnabled, dragMoveEnabled, dropEnabled in MXML and supply a data provider. However, for most real world scenarios we need to handle a lot more then that. Below is the list component that I used of which I wrapped in the ListManagerPanel.mxml class. Take a look at the example and it’s source code and take special care to look at the ListManagerPanel class. Two instances of that class support dragging and dropping between their lists.

<mx:List id="itemsList"
    width="100%" height="100%"
    allowMultipleSelection="true"
    change="validateState()"
    dataProvider="{listItems}"
    itemDoubleClick="editItem()"
    doubleClickEnabled="true"
    dragComplete="validateState()"
    dragEnabled="true"
    dragMoveEnabled="true"
    dropEnabled="true">
</mx:List>

I won’t go into detail explaining the inner workings of the example application but feel free to use the source code as inspiration for your own work.

If you have questions don’t be afraid to ask.

Additional Online Resources

• Dragging rows between two different Flex DataGrid controls
• Adding Drag and Drop
• Using drag-and-drop with list-based controls
• Drag and drop examples