Drag and Drop behavior

Two drag-n-drop modes are available in dhtmlxTree: drop as child and drop as sibling. To enable either of them you should use the tree.setDragBehavior() method.

drop as child

drop as sibling

THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.

Source

 
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
<table>
    <tr>
        <td>
            drop as child
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:hidden;"/>
        </td>
        <td style="padding-left:25" valign="top">
            drop as sibling
            <div id="treeboxbox_tree2" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:hidden;"/>
        </td>
    </tr>
</table>
<br>
<script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluefolders/");
tree.enableDragAndDrop(true);
tree.enableSmartXMLParsing(true);
tree.loadXML("../common/tree_a.xml");
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);
 
tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../../codebase/imgs/csh_bluefolders/");
tree2.enableSmartXMLParsing(true);
tree2.enableDragAndDrop(true);
tree2.setDragBehavior("sibling");
tree2.loadXML("../common/tree_a.xml");</script>
<br><br>