DHTMLX Docs & Samples Explorer

### Drag HTML element in DataView

|  | Drag me into the dataview

Source

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

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