Lesson 12. Using Drag and Drop

What You Will Learn

In this lesson, you will:

• Learn the terminology associated with drag-and-drop operations in Flex

• Understand that the list-based components in Flex have enhanced drag-and-drop support built in

• Implement drag and drop on drag-enabled components

• Use various drag events

• Implement various methods of the DragSource and DragManager classes to implement drag and drop on nondrag-enabled components

• Use formats to allow dropping of drag proxy objects

Approximate Time

This lesson takes approximately 1 hour and 30 minutes to complete.

Lesson Files

Media Files:

None

Starting Files

Lesson12/start/EComm.mxml

Lesson12/start/as/ecomm.as

Lesson12/start/views/ecomm/GroceryDetail.mxml

Lesson12/dragDrop/start/Task1_DG_to_DG.mxml

Lesson12/dragDrop/start/Task2_DG_to_List.mxml

Lesson12/dragDrop/start/Task3_Label_to_List.mxml

Completed Files

Lesson12/complete/EComm.mxml

Lesson12/complete/as/ecomm.as

Lesson12/complete/views/ecomm/GroceryDetail.mxml

Lesson12/dragDrop/complete/Task1_DG_to_DG.mxml

Lesson12/dragDrop/complete/Task2_DG_to_List.mxml

Lesson12/dragDrop/complete/Task3_Label_to_List.mxml

Drag and drop is a common user interface technique in desktop applications. Not so, however, in web applications until the idea and implementation of rich Internet applications (RIAs) came along. Flex and Flash Player permit you as a web developer to use drag and drop just as a desktop developer does.

Implementing drag and drop in a Flex application utilizes the Drag and Drop Manager and the tools it provides. The Drag and Drop Manager enables you to write a Flex application in which users can select an object, drag it over another, and drop it on the second object. All Flex components support drag-and-drop operations, and a subset has additional drag-and-drop functionality, in which implementation is little more than adding a single property.

In this lesson you will implement drag and drop in your e-commerce application so a user can click on a product, drag it to the shopping cart, and drop it to add it to the shopping cart.

Dragging a grocery item to the shopping cart