Page History

"Drag and drop" is the term applied to the action of dragging an object from one place to another. A "drag" begins by pressing down on an eligible object and moving it while applying pressure (either by keeping a finger in touch with the screen or pressing down on a mouse button). The "drop" happens when the pressure is released (e.g., letting go of the mouse button). If the drop happens over a suitable place (the "drop target"), then the item being dragging is incorporated into the drop target somehow. A drag and drop can either cause the initial object to move to the new location or a copy of the initial object added to the new location.

...

In this example the event.target is cast to a class called "MyObject" which has a data property and that becomes the dragSource. Then a dragImage is created as a simple Label with the Label text being a string representation of the object selected. You can make any UI component, or component composite, a dragImage.

Once that has been set up in the "dragStart" event handler, the DragMouseController bead takes over and displays the dragImage as you move around the screen.

...

Use DropMouseController with the component strand that will accept the drop from the drag source strand. This can be the same component if you want to use drag and drop to re-arrange a strand's children. The DropMouseController emits its own events, such as "dragEventdragEnter" and "dragDrop". You can use these events to provide feedback to the user (such as adding a border when the dragImage drag image enters the drop target space). 

...

The event listener for the DropMouseController's "dragDrop" event can do whatever it needs to do it to incorporate the data.

private function handleDrop(event:DragEvent):void
{
    var data:Object = DragEvent.dataSource;
    var newItem:OtherObject = new OtherObject(data);
    dropZone.addElement(newItem);
    dropZone.dispatchEvent(new Event("layoutNeeded"));
}

In this example the dropped data is used to create a new instance of "OtherObject" and it is added as an element to the dropZone Group. Notice that the dropZone group is told to update its layout after the new item is added. ; FlexJS will not automatically run layouts.

...

Once the drop has completed, its often useful to the source component is to know that the drop was accepted. Perhaps you will want to delete the original component or change it somehow to reflect the drag and drop action. You do this by implementing the IDragInitiator interface and setting the object into the DragMouseController:

...

SingleSelectionDragImageBead can be used with Lists as a quick way to display a drag image from the list's itemRenderer that is being dragged about.

...

When the user finally drops, the SingleSelectionDropTargetBead will be notified by the its DropMouseController and adds the data from the drag source to the list's data provider. Once the data is incorporated, the IDragInitiator, the SingleSelectionDragSourceBead, is called upon to remove the original data unless SingleSelectionDragSourceBead's dragType property was set to "copy".

...