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-titles
F-table
Source
<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
   <script src="../../codebase/types/ftypes.js" type="text/javascript"></script>
   <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css">  
   <link rel="STYLESHEET" type="text/css" href="../../codebase/types/ftypes.css">  
<script>
dhtmlx.image_path = "../../codebase/imgs/";
var data;
function doOnLoad() {
    data = new dhtmlXDataView("data_container");
    data.define("drag", true);
    changeType("ficon");
    data.load("../common/files_ext.xml");
}
function changeType(type) {
    data.types[type].icons_src_dir = "../common/images";
    data.define("type", type);
}
</script> <div style="position:relative;"> <img src="../common/images/samples_frame.gif" width="436" height="513" alt="" border="0"> <div id="data_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-titles<br> <input type="radio" name="switch" onclick="changeType(this.value)" value="ftable"> F-table<br>