DHTMLX Docs & Samples Explorer

Drag and Drop extension

Left tree - drag out allowed, drag in denied.
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>    
Left tree - drag out allowed, drag in denied.    
<table>
    <tr>
        <td>
            drop as child
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"/>
        </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;"/>
        </td>
    </tr>
</table>
<br>
<script>
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
tree.enableDragAndDrop(true);
tree.enableSmartXMLParsing(true);
tree.loadXML("../common/tree_05_drag_n_drop.xml");
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);
 
tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../../codebase/imgs/csh_yellowbooks/");
tree2.enableSmartXMLParsing(true);
tree2.enableDragAndDrop(true);
tree2.setDragBehavior("sibling");
tree2.loadXML("../common/tree_05_drag_n_drop.xml");
function my_func(id_drag, id_landing) {
    return false;
}
tree.setOnDragIn(my_func);
</script>