<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>
 
<table border="0" cellspacing="5" cellpadding="5">
    <tr><td>
        <div id="data_container1" style="border:1px solid #A4BED4; background-color:white;width:400px;height:396px;"></div>                
    </td><td>
    </td><td>
        <div id="data_container2" style="border:1px solid #A4BED4; background-color:white;width:400px;height:396px;">
<div package="DragPackage" version="1.0" maintainer="dhtmlx Team" id="drag_1" style='width:150px; height:50px; color:white; background-color:navy;'>
    Drag me into the dataview
</div>
        </div>                
    </td></tr>                
</table>
<script>
data = new dhtmlXDataView({
    container: "data_container1",
    type: {
        template: "#Package# : #Version#<br/>#Maintainer#",
        padding: 5,
        height: 40;
    },
    drag: true;
});
data.load("../common/data.xml");
data.attachEvent("onBeforeDrop", function(context) {
    if (context.from == dhtmlx.DragControl) {
        this.add({
            Package: context.source.getAttribute("package"),
            Version: context.source.getAttribute("version"),
            Maintainer: context.source.getAttribute("maintainer");
        }, this.indexById(context.target || this.first()));
        return false;
    }
    return true;
});
dhtmlx.DragControl.addDrag("drag_1");</script>