2

using jstree i would like to limit the depth of my tree disallowing dropping on certain nodes.

Here is my (simplified) code :

$('#tree').jstree({
    "plugins":["dnd"],
    "core":{
        "check_callback":true
    },
    "dnd":{
        "copy":false
    }
}).on("move_node.jstree", function(node,nodes){
    console.log("node : "+nodes.node.id);
    console.log("parent : "+nodes.node.parent);
    console.log("position : "+nodes.position);
});

i found documentation about this for older version but not jstree 3

i tried a classic return false; on certain condition on the move_node function - it doesn't change anything. so i guess my question would simply be : how can i disable move_node on certain condition - the best way would be not allowing dragging on certain nodes (i.e. not displaying the triangle in front of them - and a red cross instead of the green mark) of course this nodes would still be draggable and act like any other nodes.

kro
  • 521
  • 6
  • 16

3 Answers3

1

In jsTree using "types" plugin you can limit dropping to certain nodes, where you can specify any node and give the allowed number of children, maximum depth of nodes allowed inside the node by setting the parameters like "max_children", "max_depth", "valid_children".

Check this Demo for your reference.

In the latest jsTree v3+ , this "types" plugin is not fully implemented in dnd plugin.

If you see the source code line number 5036 (in dnd plugin), there are comments like,

// TODO: now check works by checking for each node individually, how about max_children, unique, etc?
// TODO: drop somewhere else - maybe demo only?

Hence need to wait for the next version of jsTree.

Jeevi
  • 1,052
  • 1
  • 10
  • 22
1

This answer should be the solution for your problems.

You should use check_callback function to achieve selectivity in dropping nodes from one parent to another.

Community
  • 1
  • 1
GothamCityRises
  • 2,072
  • 2
  • 27
  • 43
0

Another solution is to write a jstree plugin such as :

$.jstree.plugins.myPlugin = function (options, parent) {

    this.check = function (chk, obj, par, pos, more) {
        if(parent.check.call(this, chk, obj, par, pos, more) === false) { return false; }
        if ( 'put here your condition to block dropping' ) {return false}
        return true;
        };

    };

Then to add 'myPlugin' to the list of plugin in the jstree instance creation.

DeFré
  • 1
  • 1