Page History

...

<js:Group id="dropZone">
    <js:beads>
        <js:VerticalLayout />
        <js:DropMouseController dragDrop="handleDrop(event)" />
    </js:beads>
</js:Group>

The event listener for the DropMouseController's "dragDrop" event can do whatever it needs to do it 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.
Drag Initiator
Once the drop has completed, its often useful to the source component is 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:
// code from DragMouseController example, including...
DragMouseController.dragImage = dragImage; // see above
DragMouseController.dragInitiator = this;
Whatever the component class is that has these two Groups becomes the drag initiator, implementing IDragIntiator interface. This means the class will need to implement two functions:
public function acceptingDrop(dropTarget:Object, type:String):void
{
    // maybe highlight the component that was dragged.
}
public function acceptedDrop(dropTarget:Object, type:String):void
{
    // maybe delete the component that was dragged.
}
The dropTarget parameter in each function just lets you know what object accepted the drop - maybe you will have different drop targets and will react differently depending on where the drop happens. The type is an indicator of what was dropped. You should save some way to identify the drag source in the "dragStart" event.
DataContainer and List Components
Very often a List is used with drag and drop; either to move or copy items from one list to another or to re-arrange items in one list. FlexJS provides specialty beads for Lists.
SingleSelectionDragSourceBead can be used with Lists whose items are to be dragged around. This takes the place of DragMouseController.
SingleSelectionDragImageBead can be used with Lists as quick way to display a drag image from the list's itemRenderer that is being dragged about.
SingleSelectionDropTargetBead can be used with Lists that are accepting drops. This can be the same list that uses SingleSelectionDragSourceBead to allow for items to be re-arranged.
<js:List>
    <js:beads>
        <js:SingleSelectionDragSourceBead />
        <js:SingleSelectionDragImageBead />
        <js:SingleSelectionDropTargetBead />
        <!-- beads for the data provider -->
    </js:beads>
</js:List>
By having these three beads present, the user will now be able to drag one item from the list to a new location within the same list. 
To Do
How do the SingleSelectionDrag* beads work? Mention the item renderer factory
How does the SingleSelectionDragImageBead work? How can you customize it.
How do you copy something instead of moving it?
How do you use this with a DataGrid?
 Lists using the SingleSelectionDragSourceBead and SingleSelectionDropTargetBead along with SingleSelectionDragImageBead.