<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DHTML Tree Special Technics</title>
</head>
<body>
<style>
body {font-size:14px;line-height:18px;}
.{font-family:arial;}
h2 {cursor:pointer;font-size:20px;margin:30px 0px 40px 5px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:blue;text-decoration:underline;line-height:10px}
h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
.op {cursor:pointer;}
div.block {margin-left:5px;}
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
li {margin-top:2px;}
</style>
<h2 >DHTML Tree Special Technics</h2>
<div class="block">
<!--- Link functionality --->
<a name="spec_link"><h3 >Links in tree</h3
></a><div style="display:show" class="block">
Xml for the tree:<br>
<xmp>
<tree..>
<item ...>
<userdata name=“myurl“>http://www.google.com</userdata>
<item ...>
<userdata name=“myurl“>http://groups.google.com</userdata>
</item>
</item>
</xmp>
<br>
there is an event handler for click processing:
<xmp>
tree.setOnClickHandler(doOnClick);
function doOnClick(nodeId){
var myUrl = tree.getUserData(nodeId,“myurl“);
window.open(myUrl);// or frames[“someframe“].location.href = myUrl
}
</xmp>
</div>
<!-- -->
<a name="spec_dnd_out"><h3 >Drag-n-drop outside tree</h3
></a><div style="display:show" class="block">
Any page control can be set as “landing zone”. Here is an example:
<xmp>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<input type="text" width="120px" id="sInput">
<script>
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("../imgs/");
//user defined drag and drop control with event handlers inside
function s_control(){
//action occures on drag
this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
targetHtmlObject.style.backgroundColor="";
targetHtmlObject.value=sourceHtmlObject.parentObject.label;
}
//action occures on drag moved in landing zone
this._dragIn=function(htmlObject,shtmlObject){
htmlObject.style.backgroundColor="#fffacd";
return htmlObject;
}
//action occures on drag moved out landing zone
this._dragOut=function(htmlObject){
htmlObject.style.backgroundColor="";
return this;
}
}
//set input control as “landing zone”
tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control);
</script>
</xmp>
</div>
</div>
</body>
</html>