## DHTML Tree Special Technics

### Links in tree

Xml for the tree:

    <tree..>
    	<item ...>
    		<userdata name=“myurl“>http://www.google.com</userdata>
    		<item ...>
    			<userdata name=“myurl“>http://groups.google.com</userdata>
    		</item>
    	</item>

there is an event handler for click processing:

    tree.setOnClickHandler(doOnClick);
    function doOnClick(nodeId){
    	var myUrl = tree.getUserData(nodeId,“myurl“);
    	window.open(myUrl);// or frames[“someframe“].location.href = myUrl
    }

### Drag-n-drop outside tree

Any page control can be set as “landing zone”. Here is an example:

    <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>