Dynatree disable drop on non-folders

Question

Is there an easy way to avoid users from dropping files & folders onto files?

There is a little script in dynatree which checks if you try to move a file on the same position where it was. It then displays a little red cross to show the user that this point is un-dropable.

Is there a workaround to use the same approach for making only folders dropable? (I used jstree in the past, there you could set this up, but dynatree has some advantages to my current project, so I want to switch to dynatree...)

Answer 1

You can simply return false in the onDragStart or onDrop callbacks to control this:

   $("#tree").dynatree({
   ...
   dnd: {
      preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
      onDragStart: function(node) {
        /** This function MUST be defined to enable dragging for the tree.
         *  Return false to cancel dragging of node.
         */
        return true;
      },
      onDragEnter: function(node, sourceNode) {
        /** sourceNode may be null for non-dynatree droppables.
         *  Return false to disallow dropping on node. In this case
         *  onDragOver and onDragLeave are not called.
         *  Return 'over', 'before, or 'after' to force a hitMode.
         *  Return ['before', 'after'] to restrict available hitModes.
         *  Any other return value will calc the hitMode from the cursor position.
         */
        // Prevent dropping a parent below another parent (only sort
        // nodes under the same parent)
        if(node.parent !== sourceNode.parent){
          return false;
        }
        // Don't allow dropping *over* a node (would create a child)
        return ["before", "after"];
      },
      onDrop: function(node, sourceNode, hitMode, ui, draggable) {
        /** This function MUST be defined to enable dropping of items on
         *  the tree.
         */
        sourceNode.move(node, hitMode);
      }
    }

Have a look at the source code of this example http://wwwendt.de/tech/dynatree/doc/sample-dnd.html