| Sample: dhtmlxFolders | Drag-n-drop in Folders | dhtmlxFolders main page |

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

    <div id="folders_container" style="width:400px;height:300px;overflow:hidden;"></div>

    <script>
        //Initialize dhtmlxFolders
        myFolders = new dhtmlxFolders("folders_container");
        //set path to folder with native images (where to get image for drop-before/drop-next)
        myFolders.setImagePath("../../codebase/imgs/")
        myFolders.setItemType("ficon");
        myFolders.setUserData("icons_src_dir","../images");
        //enable dag-n-drop
        myFolders.enableDragAndDrop(true);
        //add evend handler for onBeforeDrop event (it gets type of drop, source item id, target item id)
        myFolders.attachEvent("onBeforeDrop",function(dropType,sID,tID){
                    //find type of target item (in this case - directory or file)
                    var tType = this.getItem(tID).data.dataObj.getAttribute("type");
                    //if type of drop is "in" and target item is directory - remove source item from folders
                    if(dropType=="in" && tType=="dir"){
                        this.deleteItem(sID);
                        //...and cancel default action
                        return false;
                    }else //else proceed wth default action
                        return true;
                })
        myFolders.loadXML("files_ext.xml","../../codebase/types/ficon.xsl");</script>