Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by shalini on Jul 26, 2009 22:17
open dhtmlx forum
DHTMLTREE : HOW TO RESTRICT DROP ON SELECTED TREE NODES with dragindhtmlxtree

hi,
I have written code

<!--conf
<sample>
<product version="2.0" edition="pro"/>
<modifications>
<modified date="070101"/>
</modifications>
</sample>
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tree and Context menu</title>
<link rel="stylesheet" type="text/css" href="../../../dhtmlxMenu/codebase/skins/dhtmlxmenu_standard.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">

<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxtree.js"></script>
<script language="JavaScript" src="../../../dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
<script src="../../codebase/ext/dhtmlxtree_dragin.js"></script>


    

</head>
<body>
<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<center>
<table >
<tr>
<td>
<h3>
Tree with context menu</h3>
<div id="treeboxbox_tree" style="width: 250; height: 218; background-color: #f5f5f5;
border: 1px solid Silver;">
</div>
</td>
<td>
<div style="padding-left: 50px;">
<div id="a0">
Some text</div>
<br />
<div dragindhtmlxtree="true" id="Role1" text="Role 1">
<div style='width: 50px; height: 20px;'>
Role 1</div>
</div>
<br />
<div dragindhtmlxtree="true" id="Role2" text="Role 2">
<div style='width: 50px; height: 20px;'>
Role 2</div>
</div>
<br />
<div dragindhtmlxtree="true" id="Role3" text="Role 3">
<div style='width: 50px; height: 20px;'>
Role 3</div>
</div>
<br />
</div>
</td>
</tr>
</table>
</center>
<script>

     function onButtonClick(menuitemId,type){
     var id = tree.contextID;
     if (type.toString().indexOf("Role")>=0)
     tree.deleteItem(id);
     }
var a;
     menu = new dhtmlXMenuObject(null,"standard");
     menu.setImagePath("../../../dhtmlxMenu/codebase/imgs/");
     menu.setIconsPath("../images/");
     menu.renderAsContextMenu();
     menu.setOpenMode("web");
     menu.attachEvent("onClick",onButtonClick);
     menu.loadXML("test_context.xml");
    

     tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
     tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
     tree.enableCheckBoxes(1);
        tree.enableThreeStateCheckboxes(true);
        tree.enableSmartXMLParsing(true);
     tree.enableDragAndDrop(true);
     tree.enableContextMenu(menu);
     tree.loadXML("test_tree3.xml")
tree.makeAllDraggable();
tree.attachEvent("onDrag",moveRow);
tree.dragger.addDragLanding(document.getElementById(a), new s_control);
tree.attachEvent("onDragIn",function(sourceID,targetID,srcGrid,targetGrid){
DropEnable(sourceID);
});

function moveRow (sourceID,targetID,startIndex,srcGrid,targetGrid){
return false;
     }

//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;
     }
}

function DropEnable (sourceID){
a = sourceID;
     }
    
     </script>

</body>
</html>

now I want to restricr that when I drop roles on tree barnches it will allow me to drop on only node whose Id starts with 'Branch'

Please help

thanks in advance

Regards
Shalini
Answer posted by Alex (support) on Jul 27, 2009 01:17

Hello, 

there is make makeDragable that allows to define any action for the dragged element: 

tree.makeDragable("el_id",function(drop_obj,source_id,target_on,target_before){
 ...
});

Please, see the sample dhtmlxTree/samples/drag_n_drop/drag_in_simple.html

But onDragIn should return true in order to enable drag-n-drop





Answer posted by Shalini on Jul 27, 2009 01:47

hi

Please find my code attached

now I want to restrict that when I drop any Roles div on tree nodes, then it will allow me to drop role div only on those nodes whose Id starts with 'Branch'

Please help and suggest

Regards
Shalini

Attachments (1)
Mycode.zip69.51 Kb
Answer posted by Alex (support) on Jul 27, 2009 03:15

You can usemakeDragable method. For example:

tree.makeDragable("Role1",addItem)

tree.makeDragable("Role2",addItem)
tree.makeDragable("Role3",addItem)
function addItem(drop_obj,source_id,target_on,target_before){
  if(tree.getItemText(target_on) && tree.getItemText(target_on).indexOf("Branch")!=-1)
  drop_obj.insertNewItem(target_on,source_id,source_id);  
};


Answer posted by Shalini on Jul 27, 2009 04:10
thanks , its working now...