Drag-n-drop into tree

Try to drag any element and drop it on the tree

Some text

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>    
<script  src="../../codebase/ext/dhtmlxtree_dragin.js"></script>    
   <table>
  <tr>
     <td>
        <div id="treeboxbox_tree" style="width:260px; height:260px;background-color:#f5f5f5;border :1px solid Silver;; "/>
     </td>
     <td>
<div style="padding-left:50px;" onselectstart="return false;">
<div id="a0">Some text</div> <br/>
<div id="a1" text="Red" ><div style='width:50px; height:20px; background-color:red;'>&nbsp;</div></div> <br/>
<div id="a2" text="Green" ><div style='width:50px; height:20px; background-color:green;'>&nbsp;</div></div><br/>
<div dragInDhtmlXTree="true"  id="a3" text="Blue" ><div style='width:50px; height:20px; background-color:blue;'>&nbsp;</div></div><br/>
<div dragInDhtmlXTree="true"  id="a4" image="folderOpen.gif" text="Open"><div  style="background-image:url(../../codebase/imgs/csh_bluefolders/folderOpen.gif); width:16px; height:16px;font-size:5px;">&nbsp;</div></div><br/>
<div dragInDhtmlXTree="true"  id="a5" image="folderClosed.gif" text="Closed"><div style="background-image:url(../../codebase/imgs/csh_bluefolders/folderClosed.gif); width:18px; height:18px;font-size:5px;">&nbsp;</div></div><br/>
</div>
     </td>
  </tr>
   </table>
<br><br>
<br><br>
   <script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_scbrblue/");
tree.enableDragAndDrop(true);
tree.loadXML("../common/tree_a.xml");</script>
<br><br>
 
<style>
    div.alfa{
        margin-top:10px;
        margin-left:50px;
    }
</style>
<script>function onLoad() {
    tree.makeDragable("a0");
    tree.makeDragable("a1");
    tree.makeAllDraggable();
    tree.makeDragable("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>