Learn about the Drag and Drop Application of Adobe Flex Builder 2

Locate the file DragAndDrop_wt1 and open it in the Editor. You will see this file contains an XML list, and then a few Data Grids. We will be looking at the code in detail later.

Run the application, and in our first example of drag and drop, we will be looking at the simplest approach. Some of our components are pre-enabled for drag and drop, and we will see that, really, it's as easy as setting a few properties and you are done.

You can drag data from one component and drop it in another. Note that when I drop this record in the right hand data grid, there is more information about it. That's because when you drag and drop, you are not just dragging the visual data, you are dragging the entire data item for that particular index of whatever component you have dragged from.

Alt+Tab back to Flex, and open the file DragAndDrop_wt2. Go ahead and run this file. This will be a slightly more complex example, because although we have a data grid on the left, which has pre-built drag and drop behavior within it, on the right we have a simple list, which does not inherently support drag and drop behavior, so we will learn how to create it programmatically for any component.

However when you do so, you need to be aware of what data you are dragging, and then what do you want to drop. You may also want to use the internal iconography which is part of the drag and drop behaviors, where you will get a red icon if the user cannot drop or it doesn't make sense to drop in a particular component, because in this case its the source component, but then you can change to a green icon to indicate, yes, you may drop here. We will learn how to control that behavior as well. Also note that when I drop on the right hand side, it's the photographer name that appears in the list as oppose to the category. We will learn how to control that behavior as well.

We turn to Flex Builder and now open DragAndDrop_wt5. Run this application, and this will be our most involved demonstration regarding drag and drop, because ultimately virtually anything visual in Flex can be dragged and dropped elsewhere.

In this case we are working with a draggable image in a simple list box. We will have to implement dragging behavior using the Drag Manager Class to control this entire process. When I click away from the image you will see that a drag proxy image appears; a small elfed version of the original image, along with the No Drop icon that we mentioned earlier.

Then I will drag over the target, and although I appear to be dropping an image, it's the photographer name which appears in the list. Drag and drop behaviors open up a lot of interface possibilities that simply aren't there in standard web application development.

Go back to Flex Builder and right click over any one of these files and select Close All. Then right click over Part 1 Lesson 01 and close the project.