Search Flex Samples

Dragging from a Tree to a List/TileList

In the Flex framework, we have made dragging and dropping within various List components fairly trivial. Assuming that your data is similar, you simply need to add dragEnabled=true to your source and then dropEnabled=false for your destination. However, the one exception in this case is Tree. By default, you cannot drag any items from any other drag enabled List component (other than another tree). If you look at the source of the framework, you will see that all of the event handlers used for TileList, List, HorizontalList and DataGrid are in ListBase.as. However, Tree has its own custom drag event handlers. Therefore, if you want to share data between another List component and a Tree using drag and drop, you will need to override all of the drag event handlers. These handlers include dragEnter, dragDrop, dragComplete and dragOver. Here is an example Application where you can drag items from a Tree to a TileList. The items will be removed from the Tree.

Here is the code for the Tree and TileList:

dragEnter=”doDragEnter(event)”dragDrop=”doDragDrop(event)” columnWidth=”100″ />

And here are my event handlers for each drag events:

public function doDragOver(event:DragEvent) : void
{
event.preventDefault();DragManager.showFeedback(event.ctrlKey ? DragManager.COPY : DragManager.MOVE);
TileList(event.target).showDropFeedback(event);
}public function doDragEnter(event:DragEvent): void
{
event.preventDefault();DragManager.acceptDragDrop(TileList(event.target));
DragManager.showFeedback(event.ctrlKey ? DragManager.COPY : DragManager.MOVE);
TileList(event.target).showDropFeedback(event);
}

public function doDragDrop(event:DragEvent): void
{
event.preventDefault();
var myTileList:TileList = TileList(event.target);
myTileList.hideDropFeedback(event);if (event.dragSource.hasFormat(”treeItems”))
{
if (!myTileList.dataProvider)
// Create an empty collection to drop items into.
myTileList.dataProvider = [];

var items:Array = event.dragSource.dataForFormat(”treeItems”) as Array;
for (var i:int = items.length - 1; i >= 0; i–)
{
myTileList.dataProvider.addItemAt(String(items[i].@label), TileList(event.target).calculateDropIndex(event));
}
}
}

public function doDragComplete(event:DragEvent): void
{
event.preventDefault();
if (event.action == DragManager.MOVE && Tree(event.target).dragMoveEnabled)
{
var target:Tree = Tree(event.target)
if (event.relatedObject != this)
{
//if we dropped on another component
//then we need to remove from ourself first
var items:Array = event.dragSource.dataForFormat(”treeItems”) as Array;
var parent:*;
var index:int;

//do the remove
for (var i:int=0; i{
parent = target.getParentItem(items[i]);
index = getChildIndexInParent(parent, items[i], target);
target.mx_internal::removeChildItem(parent, items[i], index);
}
}
}
}

private function getChildIndexInParent(parent:Object, child:Object, target:Tree):int
{
var index:int = 0;
if (!parent)
{
var cursor:IViewCursor = ICollectionView(target.dataProvider).createCursor();
while (!cursor.afterLast)
{
if (child === cursor.current)
break;
index++;
cursor.moveNext();
}
}
else
{
if (parent != null && target.dataDescriptor.isBranch(parent) &&
target.dataDescriptor.hasChildren(parent))
{
var children:ICollectionView = target.dataDescriptor.getChildren(parent);
if (children.contains(child))
{
for (; index < children.length; index++)
{
if (child === children[index])
break;
}
}
}
}
return index;
}

Demo: TileList2Tree.swf
Source code: TileList2Tree.mxml

1 comments:

Alfred said...

my Dilemma is actrually the opposite. Dragging from a container to a tree component. any ideas?

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples