DHTMLX Docs & Samples Explorer

### Drag data from DataView to HTML container

Drop some item here
Source

    <script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css">

    <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>