Flex 3 Cookbook

Chapter 10. Dragging and Dropping

The drag-and-drop capabilities of the Flex Framework enable you to enhance the Rich Internet Application experience by allowing a user to visually move data from one place to another. Drag-and-drop support can be added to any component that extends the mx.core.UIComponent class. Within a drag-and-drop operation, there is an initiator and a receiver. Any instance of a UIComponent can accept drop operations initiated by a drag gesture, and some Flex components that are list-based, such as List, Tree and DataGrid, have built-in support for managing a drag-and-drop operation to help automate the process of moving data from one source to another and within the component itself.

A drag-and-drop operation is initiated by a mouse gesture. You select a component or item by clicking the mouse and then drag the item while keeping the mouse button depressed. During the drag gesture, an image referred to as a drag proxy is added to the display and follows the movement of the mouse to indicate that the item is being dragged. Along with the drag proxy, built-in icons are displayed to indicate that the cursor is over a component that accepts drop operations. To enable a component to accept drop operations, you set drag-and-drop event handlers on the component. A drop-enabled component is considered a drop target and can inspect the drag source data object to determine whether the data is in an acceptable format for the component. The drag source object can be either ...