by Andreas

Disable drag and drop in elFinder 2.x

The drag and drop functionality in elFinder 2.x can at be a bit of a problem. You might experience a bit of a lag, and sometimes there is a delay in the button-up event which causes you to drag folders and files around unintentionally.

Currently there is no property allowing drag and drop to be disabled, so you’ll have to make some minor changes in the .js files. My original solution to this was commenting out some delegates in tree.js and cwd.js but I will be the first to admit that this was a dirty hack with possible side effects – not pretty at all!

So here’s the real solution:

If you want to disable draggable animation and functionality, locate the Draggable options in elFinder.js (around line 465). Remove the appendTo parameter from ‘body’ to ‘’ and draggable plugin will be disabled completely.

If you want to keep the animated dragging functionality, but prevent the user from actually doing any move operations, locate the Droppable options in elFinder.js (around line 502), and change the accept parameter. Leave the types of droppable you want to support (file, folder or nav dir) and just remove the others. I didn’t want anything to be droppable to I changed it from this:

    /**
     * Base droppable options
     *
     * @type Object
     **/
    this.droppable = {
            tolerance  : 'pointer',
            accept     : '.elfinder-cwd-file-wrapper,.elfinder-navbar-dir,.elfinder-cwd-file',
            hoverClass : this.res('class', 'adroppable'),

to this:

    /**
     * Base droppable options
     *
     * @type Object
     **/
    this.droppable = {
            tolerance  : 'pointer',
            accept: '',
            hoverClass : this.res('class', 'adroppable'),