In my jstree I have a Root node which is the parent node of all. I have used dnd plugin. I want to allow drag and drop anywhere in the tree but only inside the root i.e. not before or after the Root.

- [Root]
   - Node 1
      - Node 1.1
      - Node 1.2
   + Node 2
   - Node 3
      + Node 3.1

After checking with forums I found that drag_check event is for foreign nodes only and not for any node within the tree. To validate for same tree node we need to use crrm -> check_move event. That is where I need help. I want to return false if the node is dropped before or after [Root].

Here is the fiddle to start - /

In my jstree I have a Root node which is the parent node of all. I have used dnd plugin. I want to allow drag and drop anywhere in the tree but only inside the root i.e. not before or after the Root.

- [Root]
   - Node 1
      - Node 1.1
      - Node 1.2
   + Node 2
   - Node 3
      + Node 3.1

After checking with forums I found that drag_check event is for foreign nodes only and not for any node within the tree. To validate for same tree node we need to use crrm -> check_move event. That is where I need help. I want to return false if the node is dropped before or after [Root].

Here is the fiddle to start - http://jsfiddle.net/juyMR/23/

• javascript
• jquery
• tree
• jstree
• drag-and-drop

4 Answers 4

In the current version of jstree (3.0.1) there is a more easy solution, everything you have to use is

"types" : {     
       "#" : {
            "max_children" : 1
        }
    },

If you are using the type plugin there are two predefined types. One is the "#" used above. This is automatically used for the "real" root element of the tree, which means the one which is internally used. So if you are adding your own root as the first node without any extra config everything will work fine.

You are very close, you just need a else statement to return true

http://jsfiddle.net/blowsie/juyMR/59/

 "crrm" : {
        "move" : {
            "check_move" : function (data) {
               // alert(data.r.attr("id"));
                if(data.r.attr("id") == "999") {
                    return false;
                }
                else {
                    return true;
                }
            }
        }
    },

This can be handled out of the box without any additional functions:

$("#tree").jstree({
    "types" : {     
        "valid_children" : [ "root" ], //<== THIS IS THE IMPORTANT ONE !
                    "types" : {
                              "default" : {
                                    "valid_children" : "none"
                              },
                              "root" : {
                                    "valid_children" : "default"
                              }
                              }
              }
});

You can mention the "valid_children" inside each of your node types, but also one level higher (check in the code above where it says "THIS IS THE IMPORTANT ONE ".

This will globally only allow your node-type ROOT to have children, which means you can not move anything out of the root, but everywhere inside the root tree.

Take a look at data.o (source node) and data.np (node parent) and inspect their IDs in the crrm check_move. Looking at the fiddle example, dont allow the data.np.attr("id") to equal "jsTreeDiv".