# Editable Drag and Drop tree

**URL:** <https://forum.kirupa.com/t/editable-drag-and-drop-tree/151958>\
**Category:** flash\
**Created:** [June 20, 2005, 3:19am UTC](https://forum.kirupa.com/t/editable-drag-and-drop-tree/151958 "2005-06-20T03:19:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![pravyn](https://avatars.discourse-cdn.com/v4/letter/p/9fc348/32.png) [@pravyn](https://forum.kirupa.com/u/pravyn)\
**Post date:** [June 20, 2005, 3:19am UTC](https://forum.kirupa.com/t/editable-drag-and-drop-tree/151958/1 "2005-06-20T03:19:31Z")

</div>

I’m looking for a tree which has drag and drop nodes and also editable meaning renaming, moving and deleting. So far I have a view only tree list, but I need functions like adding a node, moving, deleting and drag and drop functionalities… anyone.?? here is the code so far…

import mx.controls.Tree;  
class TreeNavMenu extends MovieClip  
{  
var menuXML:XML;  
var menuTree:Tree;

function TreeNavMenu ()  
{  
// Set up the appearance of the tree and event handlers  
menuTree.setStyle (‘fontFamily’, ‘\_sans’);  
menuTree.setStyle (‘fontSize’, 11);  
menuTree.setStyle (‘embedFonts’, false);  
menuTree.setStyle (‘backgroundColor’, ‘0xFFFFFF’);  
menuTree.setStyle (‘rollOverColor’, ‘0xD8DEEB’);  
menuTree.setStyle (‘selectionColor’, ‘0xBFCAE1’);  
menuTree.setStyle (‘textSelectedColor’, ‘0xFFFFFF’);  
menuTree.setStyle (“disclosureClosedIcon”, “arightIcon”);  
menuTree.setStyle (“disclosureOpenIcon”, “adownIcon”);  
menuTree.setStyle (“folderClosedIcon”, “plusIcon”);  
menuTree.setStyle (“folderOpenIcon”, “minusIcon”);  
menuTree.setStyle (“defaultLeafIcon”, “nodeIcon”);  
menuTree.setStyle (“textIndent”, 12);  
menuTree.setStyle (“indentation”, 18);

menuTree.rowHeight = 23;  
menuTree.setStyle (“openEasing”, mx.transitions.easing.Bounce.easeOut, 10, 1200, 5, true);  
/\*  
vscroll.setStyle = new FStyleFormat;  
vscroll.setStyle.scrollTrack = 0x1C455E;  
vscroll.setStyle.highlight = 0x29678B;  
vscroll.setStyle.background = 0x215371;  
vscroll.setStyle.highlight3D = 0x29678B;  
vscroll.setStyle.darkshadow = 0x1C455E;  
vscroll.setStyle.shadow = 0x215371;  
vscroll.setStyle.face = 0x245B7B;  
vscroll.setStyle.arrow = 0xFFFFFF;  
vscroll.setStyle.addListener(vscroll);  
vscroll.setStyle.applyChanges();\*/  
// Load the menu XML

var treeNavMenu = this;  
menuXML = new XML ();  
menuXML.ignoreWhite = true;  
var s = unescape (\_url);  
var ueURL = s.substr (s.indexOf ("?") + 1, s.length);  
\_root.preLoad\_mc.\_visible = true;  
\_root.anim\_mc.\_visible = true;  
menuXML.load (“prodCatalog\_promo.xml”);  
[//menuXML.load](https://menuXML.load) (“GenerateCatalogXml.aspx?” + ueURL);  
menuXML.onLoad = function ()  
{  
treeNavMenu.onMenuLoaded ();  
};  
}  
function change (event:Object)  
{  
if (menuTree == event.target)  
{  
//var node:XMLNode = menuTree.selectedItem;  
var node = menuTree.selectedNode;

// If this is a branch, expand/collapse it  
if (menuTree.getIsBranch (node))  
{  
menuTree.setIsOpen (node, !menuTree.getIsOpen (node), true);  
}  
// If this is a hyperlink, jump to it  
var url = node.attributes.URL;  
if (url != undefined)  
{  
getURL (url, “\_self”);  
}  
// Clear any selection  
menuTree.selectedNode = null;  
}  
}

function onMenuLoaded ()  
{  
menuTree.dataProvider = menuXML.firstChild;  
menuTree.addEventListener (“change”, this);  
checkBranch (menuXML.firstChild);  
}  
function checkBranch (node:XMLNode)  
{  
\_root.preLoad\_mc.\_visible = false;  
\_root.anim\_mc.\_visible = false;

if (node.attributes.isBranch == “true”)  
{  
menuTree.setIsBranch (node, true);  
}  
if (node.attributes.id == “CPE” || node.attributes.id == “DATA” || node.attributes.id == “ILEC” || node.attributes.id == “IS” || node.attributes.id == “VOICE” || node.attributes.id == “VOL”)  
{  
menuTree.setIcon (node, “cat\_icon”);

}  
for (var i = 0; i \< node.childNodes.length; i++)  
{  
checkBranch (node.childNodes\*);  
}  
}

}