dhtmlxTree has 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 enableDragAndDrop() method:
tree.enableDragAndDrop(mode, rmode);
The parameters here are as follows:
There is a simple method that allows the user to set d-n-d mode - setDragBehavior():
<script> tree.setDragBehavior(mode, select); </script>
Dragging mode should be indicated as the parameter of this method. The parameters are the following:
There is also the 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):
<script> tree.enableMercyDrag(true|false); </script>
Objects from page can be easily dragged into the tree. There are the following ways of making 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>
Drag-and-drop between frames|iframes is enabled by default (works in IE and FireFox), so no additional code is required except:
<script> tree.enableDragAndDrop(true); </script>
All you need to do additionally is to insert the following code into the frame/iframe containing no tree:
<script> new dhtmlDragAndDropObject(); </script>
Dragging a node from the tree to some input control on page is also possible with dhtmlxTree:
<script> tree.dragger.addDragLanding(sinput, { _drag : function(){ ... }, _dragIn : function(){ ... }, _dragOut : function(){ ... } }); <acript>
The parameters of addDragLanding() method are as follows:
The first function is responsible for the action itself, while the other two are used for its visualization.
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:
<script> tree.enableDragAndDropScrolling(false); // true to enable again </script>