<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css">  
<style type="text/css">
    body{
        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;
    }
</style>
 
<div id="data_container1" style="border:1px solid #A4BED4; background-color:white;width:400px;height:396px; float:left;"></div>                
<div style="width:50px; float:left">&nbsp;</div>
<div id="data_container2" style="background-color:white;width:400px;height:396px;border:1px solid red;overflow:auto; float:left;">
    Drop some item here
</div>                
<div style="clear:both"></div>    
<script>
data = new dhtmlXDataView({
    container: "data_container1",
    type: {
        template: "#Package# : #Version#<br/>#Maintainer#",
        padding: 5,
        height: 40;
    },
    drag: true;
});
data.load("../common/data.xml");
dhtmlx.DragControl.addDrop("data_container2", {
    onDrop: function(source, target, d, e) {
        var context = dhtmlx.DragControl.getContext();
        var item = context.from.get(context.source[0]);
        var d = document.createElement("DIV");
        d.innerHTML = item.Package + " - " + item.Version;
        target.appendChild(d);
    }
});</script>