Search code examples
jstreejstree-dnd

Disable drag'n'drop from a level to another one

I've a treeview formed from and I'd like to disable drag'n'drop node from a level to another. Let's take an example:

  • Branch 1
    • leaf 1
    • leaf 2
    • leaf 3
  • Branch 2
    • leaf 4
    • leaf 5
  • Branch 3
    • leaf 6
    • leaf 7
  • Branch 4
    • leaf 8

I want the user to be able to move branch/re-order leafs & re-order branches but not promote a leaf as a branch or demote a branch as a leaf.

I've started to take a look at the file jstree.dnd.js to change the comportment but it's out of my league unfortunately.

How can I do this?

Solution

  • You can use the jstree types plugin. Just include it in your config plugins array. Then configure your nodes accordingly (to assign a type to a node make sure it has a type property in the JSON).

    Here is an example config:

    "types" : {
    "#" : { // the root node can have only "branch" children
        "valid_children" : ["branch"]
    },
    "branch" : { // any "branch" can only have "leaf" children
        "valid_children" : ["leaf"]
    },
    "leaf" : { // "leaf" typed nodes can not have any children
        "valid_children" : []
    }
},

    Here is a demo:
    http://jsfiddle.net/DGAF4/560/

    You can read more on the types plugin in the repo and on the docs page.

    Keep in mind you can use the core.check_callback function and avoid using the types plugin - it will give you full manual control but is a bit more complicated to use. I can go into detail if the above does not work for you for some reason.