DHTMLX Docs & Samples Explorer

Drag-n-drop in Folders

Built-in Drag-n-drop in dhtmlxFolders has default actions for "before" and "next" drop types, but no default action for "in" drop type. SO you'll need to define it for your own

Changing type, Folders adapts drag-n-drop to new items appearence

F-icon
F-tiles
F-table
Source
<script src="../../codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="../../codebase/dhtmlxfolders.js" type="text/javascript"></script>
<script src="../../codebase/ext/dhtmlxfolders_drag.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxfolders.css">    
<script>
var myFolders;
function doOnLoad() {
    myFolders = new dhtmlxFolders("folders_container");
    myFolders.setImagePath("../../codebase/imgs/");
    myFolders.setItemType("ficon");
    myFolders.setUserData("icons_src_dir", "../common/images");
    myFolders.enableDragAndDrop(true);
    myFolders.attachEvent("onBeforeDrop", function(dropType, sID, tID) {
        var tType = this.getItem(tID).data.dataObj.getAttribute("type");
        if (dropType == "in" && tType == "dir") {
            this.deleteItem(sID);
            return false;
        } else;
        return true;
    });
    myFolders.loadXML("../common/files_ext.xml", "../../codebase/types/ficon.xsl");
}
function changeType(type) {
    myFolders.setItemType(type, "../../codebase/types/" + type + ".xsl");
}
</script> <div style="position:relative;"> <img src="../common/images/samples_frame.gif" width="436" height="513" alt="" border="0"> <div id="folders_container" style="width:396px;height:400px;overflow:hidden;position:absolute;top:65px;left:20px;border:0px solid red;"></div> </div> <h3>Changing type, Folders adapts drag-n-drop to new items appearence</h3> <input type="radio" name="switch" onclick="changeType(this.value)" value="ficon" checked> F-icon<br> <input type="radio" name="switch" onclick="changeType(this.value)" value="ftiles"> F-tiles<br> <input type="radio" name="switch" onclick="changeType(this.value)" value="ftable"> F-table<br>