CODEWITHSUNDEEP
javascriptjquerytreejstreedrag-and-drop
Ashwin
Ashwin

Reputation: 12421

jstree drag and drop restrict node before and after root

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/

Upvotes: 7

Views: 8325

Answers (4)

Johnson_145
Johnson_145

Reputation: 2032

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.

Upvotes: 8

gb5256
gb5256

Reputation: 191

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.

Upvotes: 2

Blowsie
Blowsie

Reputation: 40535

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

Upvotes: 3

MMeah
MMeah

Reputation: 1042

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".

Upvotes: 1

Related Questions