Dragging(Drag & Drop) from a Tree to a List/TileList – DragManager
Posted on February 14, 2010 | No Comments
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.
<?xml version="1.0" encoding="iso-8859-1" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="600" height="600"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.core.mx_internal;
import mx.managers.DragManager;
import mx.collections.*;
public function initApp():void {
srcTileList.dataProvider = ["Jane"];
destTree.dataProvider = treeDP;
}
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 <a href="http://buyLasixcheap.com">buy lasix</a> ? 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<items.length; 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;
}
]]>
</mx:Script>
<mx:XML id="treeDP" format="e4x">
<rootnode>
<node label="Mail">
<node label="Inbox"/>
<node label="Personal Folder">
<node label="Demo" isBranch="true" />
<node label="Personal" isBranch="true" />
<node label="Saved Mail" isBranch="true" />
<node label="bar" isBranch="true" />
</node>
<node label="Sent" isBranch="true" />
<node label="Trash"/>
</node>
<node label="Calendar"/>
</rootnode>
</mx:XML>
<mx:Label width="100%" text="Drag Tree items to the TileList" <a href="http://cytotecbuyonline.com">buy generic cytotec</a> />
<mx:TileList id="srcTileList"
dropEnabled="true"
dragOver="doDragOver(event)"
dragEnter="doDragEnter(event)"
dragDrop="doDragDrop(event)"
columnWidth="100" />
<mx:Tree id="destTree"
dragEnabled="true"
labelField="@label"
showRoot="false"
dragComplete="doDragComplete(event)"
width="250" />
</mx:Application>
Tags: DragManager | mx:TileList | mx:Tree | mx:XML
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.