Handling Drag-and-Drop

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.

Enabling/Disabling Drag-and-Drop

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:

mode - the possible variants are:
- true - d-n-d is enabled in the tree;
- false - d-n-d is disabled in the tree.
rmode (true/false) - allows enabling/disabling dropping an item on an empty space in the tree, making this item the child of the top level tree node. This is enabled (true) by default.

If disabled (false), the user won't be able to drop an item on an empty space in the tree.

Related sample: Drag and Drop

Setting Drag-and-Drop Mode

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:

mode - the following modes are available:
- child - drop as a child;
- sibling - drop as a sibling;
- complex - both the above given modes are active;
select - select the dropped item after drag-n-drop; set to true by default.

Related sample: Drag and Drop behavior

Copy with Drag-and-Drop

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

Dragging Into Tree

Objects from page can be easily dragged into the tree. There are the following ways of making an object draggable:

using the makeDraggable() method the parameter of which is the id of the object that the user wants to make 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>

using the makeDraggable() method the parameters of which are id of the object and the function that will be activated on d-n-d to add the element into the tree:

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

using the makeAllDraggable() method without any input parameters:

<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

Dragging between Frames/Iframes

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();

Enabling Custom Drag Out

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:

sinput - the element that will act as a dragging area;
object - the object containing 3 functions:
- _drag - will be called when the element is put on the dragging area;
- _dragIn - will be called when the element is over the dragging area;
- _dragOut - will be called when the element had been over the dragging area but was moved outside it.

The first function is responsible for the action itself, while the other two are used for its visualization.

Related sample: Custom Drag Out

Enabling Auto Scrolling

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