dhtmlxTree has an extended drag-and-drop functionality (within one tree, between trees). Using this functionality it is easy to reorder nodes in a tree view, edit the tree by dragging nodes within one tree, between trees or even to another object.
The user can switch d-n-d functionality on/off with the help of the enableDragAndDrop() method:
tree.enableDragAndDrop(mode, rmode);
The parameters here are as follows:
If disabled (false), the user won't be able to drop an item on an empty space in the tree.
There is a simple method that allows the user to set d-n-d mode - setDragBehavior():
tree.setDragBehavior(mode, select);
Dragging mode should be indicated as the parameter of this method. The parameters are the following:
Related sample: Drag and Drop behavior
There is also a possibility to enable "mercy" drag mode. In this case the copy of the dragged item will be moved to another place, leaving the source item intact (copy instead move):
tree.enableMercyDrag(true/false);
Related sample: Copy with Drag-n-Drop
Objects from page can be easily dragged into the tree. There are the following ways of making an object draggable:
<div id="a0">Some text</div>
<div id="a1" text="Tomb" image="tombs.gif">Some complex HTML</div>
<script>
...
tree.makeDraggable("a0");
tree.makeDraggable("a1");
</script>
<div id="a2" text="Green">
<div style='width:50px; height:20px; background-color:green;'></div>
</div>
<script>
tree.makeDraggable("a2",function(drop_obj,source_id,target_on,target_before){
drop_obj.insertNewItem(target_on,source_id,"Green 1");
drop_obj.insertNewItem(target_on,source_id,"Green 2");
drop_obj.insertNewItem(target_on,source_id,"Green 3");
});
</script>
<div dragInDhtmlXTree="true" id="a3" text="Blue" >...</div>
<div dragInDhtmlXTree="true" id="a4" image="open2.gif" text="Open">...</div>
<div dragInDhtmlXTree="true" id="a5" image="tombs.gif" text="Tomb">...</div>
<script> tree.makeAllDraggable();
</script>
Related sample: Drag-n-drop into tree
Drag-and-drop between frames/iframes is enabled by default (works in IE, Chrome and Safari), so no additional code is required except for:
tree.enableDragAndDrop(true);
All you need to do additionally is to insert the following code into the frame/iframe containing no tree:
new dhtmlDragAndDropObject();
Dragging a node from the tree to some input control on a page is also possible in dhtmlxTree:
tree.dragger.addDragLanding(sinput, {
_drag : function(){ ... },
_dragIn : function(){ ... },
_dragOut : function(){ ... }
});
The parameters of the addDragLanding() method are as follows:
The first function is responsible for the action itself, while the other two are used for its visualization.
Related sample: Custom Drag Out
Auto scrolling is very useful in the process of d-n-d. This functionality is enabled by default, but it can be easily disabled in the following way:
tree.enableDragAndDropScrolling(false); // true to enable again
Back to top