The AdvancedTree component has built-in capabilities to handle drag and drop functionality. By setting the component's draggable property to true, a developer can allow nodes to be dragged from the tree. To enable drops internally in the tree (i.e., to enable a node from one part of the tree to be dragged and dropped into another part of the tree) the internalDropEnabled property must be set to true, which it is by default if you set draggable property to true property. In this case all internally dropped nodes are considered valid drops, meaning that the component will allow any node to be moved and dropped anywhere else in the tree structure. The exceptions are that the root node can never be dragged and dropped internally and nodes cannot be dragged "into" themselves, or into any of their children (i.e., a parent node cannot be dragged and dropped into its first child node). To limit which nodes can be dragged and where they may be dropped, developers can use the AdvancedTree's validator, discussed in the Validation section of this guide.
To enable drag and drop within an AdvancedTree instance, set both its draggable property internalDropEnabled property to true in either the Component Inspector panel, the Properties panel or through ActionScript, as in the following example:
// enables drag and drop within the tree
tree.draggable = true;
tree.internalDropEnabled = true;
Enabling Dropped Nodes from Other Trees
Enabling an AdvancedTree instance to receive dropped nodes from other AdvancedTree instances, you must set the externalDropEnabled property to true (it is false by default). You do not need to set its draggable property to true unless you wich to drag nodes from that tree as well. At this point, the tree can receive any nodes dropped from other trees. To limit which nodes may be accepted and where, you may use the AdvancedTree's validator, discussed in the Validation section of this guide.
To enable drag and drop into an AdvancedTree instance from other instances, set its externalDropEnabled property to true in either the Component Inspector panel, the Properties panel or through ActionScript, as in the following example:
// enables drag and drop from other trees
tree.externalDropEnabled = true;
Dragging from a Tree to Another Object
You can enable dragging nodes from an AdvancedTree instance to other objects on your stage. To accomplish this you first need to enable the internalDropEnabled and draggable properties of the tree. You then need to set up a handler for the DragManager's DragEvent.DROP event.
// listens for any time a dragged object is released
DragManager.getInstance().addEventListener(DragEvent.DROP, onDropItem);
This handler will be invoked whenever a dragged item (that is managed by the DragManager, such as TreeNode instances) is dropped. Within your handler you should check whether the dropped item was within the range of your drop target using hitTestObject(). If the dropped item is on your desired target, you can access the TreeNode from the DragItem found on the event object and do with this data what you need.
// adds dropped node to list if it falls onto list
private function onDropItem(event:DragEvent):void {
var dragItem:DragItem = event.dragItem;
if (dragItem.hitTestObject(_list)) {
var node:TreeNode = dragItem.data as TreeNode;
if (node) {
_list.addItem({label:node.getAttribute("label"), data:{}});
}
}
}
Dropping External Objects onto a Tree
Using the DragManager and the IDraggable interface, you can enable external items to be dragged and dropped onto the tree. Any item that can be dragged must be a DisplayObject instance that implements the IDraggable interface. This is a simple interface of three methods:
// the point will match the global position of the IDraggable instance;
// if this needs to be adjusted at all when the drag proxy is created, this should be done here
function adjustDragPosition(point:Point):void;
// returns a draggable representation of the IDraggable instance
// that will be dragged instead of the IDraggable instance
function getDragProxy():Bitmap;
// returns whatever data is represented by the dragged object;
// for instance, for tree nodes, this is a TreeNode instance
function getDragData():Object;
When your IDraggable object is clicked on to be dragged (you must set up the MouseEvent listeners to handle this), you would call the the dragItem() method of the DragManager singleton, passing the IDraggable instance.
// drags the specified item, which must implement IDraggable
DragManager.getInstance().dragItem(item);
If you would like the AdvancedTree to respond to these dragged objects, the getDragData() method you implement for your dragged objects must return a TreeNode instance. You must also enable the externalDropEnabled property of the tree.
You can look at the external_drag example that ships with the component to see an example of both dragging from the tree to other objects as well as dragging external objects into the tree.