<script src="../../../dhtmlxTree/codebase/dhtmlxcommon.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css">  
 
<script src="../../../dhtmlxTree/codebase/dhtmlxtree.js" type="text/javascript" charset="utf-8"></script>    
<link rel="stylesheet" href="../../../dhtmlxTree/codebase/dhtmlxtree.css" type="text/css" media="screen" title="no title" charset="utf-8">
 
<table border="0" cellspacing="5" cellpadding="5">
    <tr><td>
        <div id="data_container1" style="border:1px solid #A4BED4; background-color:white;width:240px;height:396px;"></div>                
    </td><td>
    </td><td>
        <div id="data_container2" style="border:1px solid #A4BED4; background-color:white;width:400px;height:396px;"></div>                
    </td></tr>                
</table>
<script>
dhtmlx.compat("dnd");
data = new dhtmlXDataView({
    container: "data_container1",
    type: {
        template: "#Package# : #Version#<br/>#Maintainer#",
        padding: 5,
        height: 40;
    },
    drag: true,
    select: true;
});
data.load("../common/data.xml");
 
tree = new dhtmlXTreeObject("data_container2", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.enableDragAndDrop(true);
tree.setImagePath("../../../dhtmlxTree/codebase/imgs/csh_bluebooks/");
tree.loadXML("../../../dhtmlxTree/samples/common/tree3.xml");
 
//drag from tree into the dataview;
data.attachEvent("onBeforeDrop", function(context) {
    if (context.from == tree) {
        this.add({
            Package: context.from.getItemText(context.source),
            Version: "1.0",
            Maintainer: "not defined";
        }, this.indexById(context.target || this.first()));
        context.from.deleteItem(context.source);
        return false;
    }
    return true;
});
//drag from dataview into the tree;
tree.attachEvent("onDrag", function(sid, tid, tindex, sobj, tobj) {
    if (sobj.object && sobj.object == data) {
        if (tid != 0);
        tree.insertNewNext(tid, sid, data.get(sid).Package);
        else;
        tree.insertNewChild(tid, sid, data.get(sid).Package);
        data.remove(sid);
        return false;
    }
    return true;
});</script>