jsTree disable moving some nodes

Question

I have a single jsTree and I want some of its nodes to be moveable. The root node and its immediate children cannot be moved.

I am using crrm and it works as expected but it still allows me to drag all nodes, even those nodes (immediately below root) that cannot be dropped anywhere. I don't want them to be draggable at all i.e. user should not be able to pick them up at all.

Answer 1

In the current version of jsTree (3.0.8) you do this:

$('#my_jstree')
            .jstree({
                "core" : {
                    "check_callback" : true
                },
                "dnd" : {
                    "is_draggable" : function(node) {
                        console.log('is_draggable called: ', node[0]);
                        if (node[0].type != 'MY-DRAGGABLE-TYPE') {
                            alert('this type is not draggable');
                            return false;
                        }
                        return true;
                    }
                },
                "types" : {
                    "default" : {
                        "icon" : "glyphicon glyphicon-flash"
                    },
                    "MY-DRAGGABLE-TYPE" : {
                        "icon" : "glyphicon glyphicon-info-sign"
                    }
                },
                "plugins" : [ "dnd", "types" ]})

Use the is_draggable function along with the types plugin to control what can be dragged around. If you want to see the icons I used include bootstrap's glyphicons stylesheet. The code here is assuming you already have a div and list for jstree in your HTML. I'll post a plunkr if anyone can't understand the code above.

EDIT - to prevent dropping do this:

"core" : {
                    "check_callback" : function(operation, node, node_parent, node_position, more) {
                        if (operation == 'move_node') {
                            console.log(node_parent);
                            if (node_parent.type == 'MY-DROPPABLE-TYPE') {
                                return true
                            } else
                                return false;
                        }
                    }
                },

Use the check_callback function to screen the droppable's type. Use the node_parent to get the droppable.