DHTMLX Docs & Samples Explorer

### Drag-n-Drop

Drag cell by its header
Source

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxaccordion.js"></script>
    <script src="../../codebase/ext/dhtmlxaccordion_dnd.js"></script>
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxaccordion_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcontainer.js"></script>
    <style>
        /* REQUIRED FOR DND */
        .dragged {
            z-index: 1 !important;
        }
    </style>

    <div>Drag cell by its header</div>
    <br><br>
    <div id="accordObj" style="position: relative; width: 320px; height: 400px;"></div>
    <div id="logObj" style="overflow: auto; height: 200px; font-size: 11px; border: 1px solid gray;width: 320px;"></div>
    <script>var dhxAccord,
    logObj;
    function doOnLoad() {
        dhxAccord = new dhtmlXAccordion("accordObj");
        dhxAccord.enableMultiMode();
        dhxAccord.addItem("a1", "a1: Main Page");
        dhxAccord.addItem("a2", "a2: Site Navigation");
        dhxAccord.addItem("a3", "a3: Support & Feedback");
        dhxAccord.addItem("a4", "a4: Comments");
        // use this method only after you will add all needed items into accordion;
        dhxAccord.enableDND();
        // attach event;
        dhxAccord.attachEvent("onDrop", function(id, ind_old, ind_new) {
            if (!logObj)
                logObj = document.getElementById("logObj");
            logObj.innerHTML += "onDrop event, id: '" + id + "', from index " + ind_old + " to index " + ind_new + "<br>";
            logObj.scrollTop = logObj.offsetHeight;
        });
    }</script>