Clever Geek Handbook

Disable drag'n'drop from level to another

I have a tree structure formed from jstreeand I would like to disable the drag'n'drop node from level to another. Let's take an example:

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

I want the user to be able to move branches / reorder leaves and reorder branches, but not push leaf

as branch

or lower a branch

as leaf

.

I started looking at the file jstree.dnd.js

to change the grade, but it's from my league unfortunately.

How can i do this?

+3


source to share


1 answer


You can use the jstree plugin types

. Just include it in your config array plugins

. Then configure your nodes accordingly (to assign the node type make sure it has a property type

in JSON).

Here's 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 about type plugins in the repo and on the docs page.

Remember, you can use a function core.check_callback

and not use type plugins - this will give you full manual control, but a little more difficult to use. I can elaborate if the above doesn't work for you for some reason.

+4


source






More articles:


All Articles