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.

cmzmuffin · Answer 1 · 2015-01-03T00:58:06.703

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.

Thanks for adding the prevent drop could, was actually what i was looking for. — Yogurt The Wise, Aug 26 '16 at 19:28
I was adding li attr while filling in the node. Based on your example, I found a solution like this. Thank you. if (operation == 'move_node') { //console.log(node_parent); //console.log(node.li_attr); if(node.li_attr.nodetype != 16) { return false } else { return true } } — Serdar Karaca, Jan 29 '21 at 18:02

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

Similar question asked, check out my answer: dnd, how to restrict dropping to certain node types?

There needs to be some type of smell test on the crrm.move.check_move function. Your your case this would be the root and first children.

edited May 23 '17 at 12:24

Community

1
1

answered Jun 25 '12 at 16:40

MMeah

1,032
1
9
18

Similar but not what I am asking here. crrm check_move is not useful for my problem. It only stops me from dropping a dragged node. I don't want the user to be able to drag nodes that cannot be dropped anywhere. – Ali Jun 26 '12 at 08:44

score 0 · Answer 3 · answered Aug 17 '12 at 07:09

0

I think what you need is drag_check

 "dnd"  :   {

        "drop_target"   :   false,


        "drag_check"    :   function(data)

        {  
          if( data.r.attr("id") ==  ... ) 
                    return false;
           //if you want to enable drag for certain nodes  return following
           return {
                    after : true,
                    before : false,
                    inside : false
                }
          }

answered Aug 17 '12 at 07:09

Dipesh KC

3,195
3
32
50

I believe the "dnd" callbacks are only when dragging and dropping external object. The question was about node internal to the tree. – Marc Rochkind Sep 28 '13 at 19:09

jsTree disable moving some nodes

3 Answers3