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