dhtmlxFolders supports drag-n-drop in the following ways:

• Drop before;
• Drop next;
• Drop in.

To enable drag-n-drop you need to call the following command:

  myFolders.enableDragAndDrop(true);

As far as drag-n-drop uses two images (included into dhtmlxFolders delivery package) to visualize before/next drop types, you also need to set path to codebase/imgs folder:

  myFolders.setImagePath("../../codebase/imgs/");

As far as drag-n-drop in dhtmlxFolders has default actions for “before” and “next” drop types (move source item before/next target item), but no default action for “in” drop type, you'll need to define it on your own , or it will just do nothing. Action for any type of drag-n-drop can be reset using onBeforeDrop event handler. For example:

  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;
  })

If this event handler returns false, then default action will be canceled. Thus it can be used to decide if drop should be allowed or not depending on drop type, source and target items.