dhtmlxTree has extended drag-and-drop functionality (within one tree, between trees, between frames). 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:

• mode - the possible variants are:
  • true - d-n-d is enabled in the tree;
  • false - d-n-d is disabled in the tree;
  • “temporary_disabled” - d-n-d is disabled temporarily.
• rmode(true|false) - allows to enable|disable drop 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.

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:

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

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:

• Using makeDraggable() method which parameter 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 makeDraggable() method which parameters 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 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>
 

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:

• 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 was 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.

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>