drag and drop

The drag-and-drop operation lets you move data from one place in an Adobe® Flex™ application to another. It is especially useful in a visual application where you can drag data between two lists, drag controls in a container to reposition them, or drag Flex components between containers.

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 List, Tree, and DataGrid, that automate much of the processing required to support drag and drop.

The drag-and-drop operation has three main stages: initiation, dragging, and dropping:

Initiation

User 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.

Dragging

While still holding down the mouse button, the user moves the mouse around the Flex application. Flex displays an image during the drag, called the drag proxy. A drag source object (an object of type DragSource) contains the data being dragged.

Dropping

When the user moves the drag proxy 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.

A 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.

A single Flex component can function as both the drag initiator and the drop target. This lets you move the data within the component.

You can specify 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.

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.

The following controls include built-in support for the drag-and-drop operation:

• DataGrid
• HorizontalList
• List
• PrintDataGrid
• TileList
• Tree

The built-in support for these controls lets you move items by dragging them from a drag-enabled control to a drop-enabled control. However, to copy items, you must add additional logic.

For all list classes except the Tree control, the default value of the dragMoveEnabled property is false, so you can only copy elements from one control to the other. By setting the dragMoveEnabled to true in the first List control, you can move and copy data. For the Tree control, the default value of the dragMoveEnabled property is true.

When the dragMoveEnabled property is set to true, the default drag-and-drop action is to move the drag data. To perform a copy, hold down the Control key during the drag-and-drop operation.

The only requirement on the drag and drop operation is that the structure of the data providers must match for the two controls. In this example, the data provider for srclist is an Array of Strings, and the data provider for the destination List control is an empty Array. If the data provider for destlist is an Array of some other type of data, destlist might not display the dragged data correctly.

You can modify the dragged data as part of a drag-and-drop operation to make the dragged data compatible with the destination.

You can use drag and drop to copy data between two different types of controls, or between controls that use different data formats. To handle this situation, you write an event handler for the dragDrop event that converts the data from the format of the drag initiator to the format required by the drop target.

Drag and drop properties for list-based controls

List-based controls provide properties and methods for managing the drag-and-drop operation. The following table lists these properties and methods:

Property/Method	Description
dropIndicatorSkin	Specifies the name of the skin to use for the drop-insert indicator which shows where the dragged data will be inserted. The default value is ListDropIndicator.
dragEnabled	A Boolean value that specifies whether the control is a drag initiator. The default value is false. When true, users can drag selected items from the control. When a user drags items from the control, Flex creates a DragSource object that contains the following data objects: A copy of the selected item or items in the control. For all controls except for Tree, the format string is "items" and the items implement the IDataProvider interface. For Tree controls the format string is "treeItems" and the items implement the ITreeDataProvider API interface. A copy of the initiator, with a format String of "source".
dropEnabled	A Boolean value that specifies whether the control can be a drop target that uses default values for handling items dropped onto it. The default value is false, which means that you must write event handlers for the drag events. When the value is true, you can drop items onto the control by using the default drop behavior. When you set dropEnabled to true, Flex automatically calls the showDropFeedback() and hideDropFeedback() methods to display the drop indicator.
dragMoveEnabled	If the value is true, and the dragEnabled property is true, specifies that you can move or copy items from the drag initiator to the drop target. When you move an item, the item is deleted from the drag initiator when you add it to the drop target. If the value is false, you can only copy an item to the drop target. For a copy, the item in the drag initiator is not affected by the drop. When the dragMoveEnabled property is true, you must hold down the Control key during the drop operation to perform a copy. The default value is false for all list controls except the Tree control, and true for the Tree control.
calculateDropIndex	Returns the item index in the drop target where the item will be dropped. Used by the dragDrop event handler to add the items in the correct location. Not available in the TileList or HorizontalList controls.
hideDropFeedback()	Hides drop target feedback and removes the focus rectangle from the target. You typically call this method from within the handler for the dragExit and dragDrop events.
showDropFeedback()	Specifies to display the focus rectangle around the target control and positions the drop indicator where the drop operation should occur. If the control has active scroll bars, hovering the mouse pointer over the control's top or bottom scrolls the contents. You typically call this method from within the handler for the dragOver event.