About drag and drop
development environments typically let you manipulate objects in
an application by selecting them with a mouse and moving them around
the screen. Drag and drop lets you select an object, such as an
item in a List control, or a Flex control such as an Image control,
and then drag it over another component to add it to that component.
You can add support for drag and drop to all Flex components.
Flex also includes built-in support for the drag-and-drop operation
for certain controls such as the MX List, Tree, and DataGrid controls
and the Spark List control,
that automate much of the processing required to support drag and
About the drag-and-drop operation
The drag-and-drop operation has three main stages: initiation,
dragging, and dropping:
initiates a drag-and-drop operation by using the mouse to select a
Flex component, or an item in a Flex component, and then moving
the component or item while holding down the mouse button. For example,
a user selects an item in a List control with the mouse and, while
holding down the mouse button, moves the mouse several pixels. The
selected component, the List control in this example, is the drag initiator.
- While still holding down the mouse button, the user moves
the mouse around the application. Flex displays an image during
the drag, called the drag indicator. A drag source object
(an object of type DragSource) contains the data being dragged.
the user moves the drag indicator over another Flex component, that
component becomes a possible drop target. The drop target inspects
the drag source object to determine whether the data is in a format
that the target accepts and, if so, allows the user to drop the
data onto it. If the drop target determines that the data is not
in an acceptable format, the drop target disallows the drop.
drag-and-drop operation either copies or moves data from the drag
initiator to the drop target. Upon a successful drop, Flex adds
the data to the drop target and, optionally, deletes it from the
drag initiator in the case of a move.
The following figure
shows one List control functioning as the drag initiator and a second
List control functioning as the drop target. In this example, you
use drag and drop to move the ’Television’ list item from the drag
initiator to the drop target:
A single component
can function as both the drag initiator and the drop target. This
lets you move the data within the component. The following example
shows a List control functioning as both the drag initiator and
the drop target:
the List control as both the drag initiator and the drop target,
you can use drag and drop to rearrange the items in the control.
For example, if you use a Canvas container as the drag initiator
and the drop target, you can then use drag and drop to move controls
in the Canvas container to rearrange them.
Performing a drag and drop
Drag and drop is event driven. To configure a component
as a drag initiator or as a drop target, you have to write event
handlers for specific events, such as the dragDrop and dragEnter events.
For more information, see Manually adding drag-and-drop support.
For some components that you often use with drag and drop, Flex
provides built-in event handlers to automate much of the drag and
drop operation. These controls are all subclasses of the MX mx.controls.listClasses.ListBase
class and the Spark spark.components.supportClasses.ListBase class,
and are referred to as list-based controls. For more information,
see Using drag-and-drop with list-based controls.
For a move or copy operation, the list-based controls can handle
all of the events required by a drag-and-drop operation. However,
if you want to copy the drag data to the drop target, and the drop
target uses a different data format, you have to write an event
handler. For more information, see Moving and copying data.