Programming Flex 3

Drag-and-Drop

Drag-and-drop is one of the many features that set Flex applications apart from other types of applications. As you’ll see in the next few sections, it is extremely simple to enable drag-and-drop functionality for some standard components, and with a little additional work you can enable drag-and-drop functionality to any type of component.

Using Built-In Drag-and-Drop Features

The simplest way to implement drag-and-drop functionality is to use the built-in features of many of the components, including List, Tree, DataGrid, Menu, HorizontalList, PrintDataGrid, and TileList. Each of these components enables drag-and-drop in the same way. They each have a dragEnabled property and a dropEnabled property. The two properties are false by default. When you set the dragEnabled property to true for a component, the user can click and drag items. Of course, in most cases enabling a component so that a user can click and drag an item is not very useful until the user can also drop the item somewhere in the application. Typically, this is accomplished by setting the dropEnabled property of another component to true. When the dropEnabled property is set to true for a component, the user can drop an item on the component that he dragged from another component. This causes the data from that item to be added to the drop target component. Example 10-7 illustrates both a dragEnabled and a dropEnabled component working in conjunction. The first data grid contains data about the user’s ...