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

Question

I've a treeview formed from jstree 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?

Answer 1

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.