Its about restriction to be needed to avoid drag-and-drop between "files" type nodes

[Mohan Sivalingam]

Hello everybody,

Hope anyone will suggest me a good solution for my problem.

I need to handle some restrictions with my jstree drag-and-drop functionality, to avoid placing a node (which is of 'file' type) under another node (which also of 'file' type).

I have 2 types of nodes i) 'default' (which i'm considering as 'files' type) and ii) 'folder'

Restrictions are as follow:

• I can place a folder node under another folder node
• I can place a file node under folder node
• I can't place a folder or file nodes under file node

Here is my jstree config:

$("div#newtreecontainer").jstree({

        "core": {

            "multiple": false,

            'check_callback' : true,

            "themes": {

                "dots": true,

                "icons": false

            }

        },

        "plugins": ['dnd', 'search', 'types', 'themes', 'contextmenu'],

        "types": {

            "max_depth": -1,

            "max_children": -1,

            "valid_children": ["folder"],

            "types": {

                "folder": {

                    "valid_children": ["default", "folder"],

                    "check_node": false,

                    "uncheck_node": false

                },

                "default": {

                    "valid_children": "none"

                }

            }

        },

        "contextmenu": {

            items: function(node) {

                var nodeType = node.li_attr.rel;

                var obj = {};

                if (nodeType == 'folder') {

                    obj['create_header'] = {

                        "label" : "Add Header",

                        "separator_before" : false,

                        "separator_after" : true,

                        "action" : function(data) {

                            var inst = $.jstree.reference(data.reference),

                                obj = inst.get_node(data.reference);

                            inst.create_node(obj, {"rel" : "folder" }, "last", function(newNode) {

                                setTimeout(function() { inst.edit(newNode); }, 0);

                            });

                        }

                    }

                    obj['create'] = {

                        "label": screen,

                        "separator_before" : false,

                        "separator_after" : true,

                        "action" : function(data) {

                            var inst = $.jstree.reference(data.reference),

                                obj = inst.get_node(data.reference);

                            inst.create_node(obj, {"rel" : "default" }, "last", function(newNode) {

                                setTimeout(function() { inst.edit(newNode); }, 0);

                            });

                        }

                    }

                }

                return obj;

            }

        }

    });

Please suggest me, where i'm doing mistake. 

Regards

Mohan Sivalingam

[Ivan Bozhanov]

You are using a v.1 config with v.3 code ... replace your types config for this one:

        "types": {
            "#" : {

              "max_depth": -1,

              "max_children": -1,

              "valid_children": ["folder"],
            }

          

                "folder": {

                    "valid_children": ["default", "folder"],

                    "check_node": false,

                    "uncheck_node": false

                },

                "default": {

                    "valid_children": "none"

                }

        },

Best regards,
Ivan

[Mohan Sivalingam]

Thanks Ivan, But sorry, its not working. :( 

I have used the below one as you said.

"types": {

            "#" : {

              "max_depth": -1,

              "max_children": -1,

              "valid_children": ["folder"],

            },

            "folder": {

                "valid_children": ["default", "folder"],

                "check_node": false,

                "uncheck_node": false

            },

            "default": {

                "valid_children": "none"

            }

},

If use this code, I'm getting the menu with right click over the nodes, but when I click on them, nothing happens. I mean its not creating any nodes further. Also, I can't able to move a node from Level 2 to Level 1 or vice versa. I can able to drag-and-drop on the same level of the tree. But, I can't able to do drag-and-drop between different levels.

Since, its in my localhost, I can't able to post the demo url for you. Could you please tell me?

Regards,

Mohan Sivalingam

[Ivan Bozhanov]

"none" is not a valid value - use:
"valid_children" : []

Which is an empty array and will prevent drops inside the file node.

Best regards,
Ivan

[Mohan Sivalingam]

Yeah I have modified the code to an empty array. Even though, Adding nodes is not working. :( Same way, I can't able to perform drag-and-drop in between various level, i mean from [level n] to [level n+1] or [level n] to [level n-1].

Or else, can i have any links for better documentation other than jstree.com. Sorry man, for a beginners like us, its not providing enough information?

Regards,

Mohan Sivalingam.

[Ivan Bozhanov]

Well, then back to basic stuff:
1) Do you get an error in the console?
2) What do you get when calling $('#newtreecontainer').jstree(true).last_error();

What do you mean by: {"rel" : "folder" } - this is not a valid type ... As I mentioned - stop working with 1.0 code, use 3.0 code - make sure you are copy/pasting correctly.

Best regards,
Ivan

[Mohan Sivalingam]

I'm not at all getting any errors in console.

Also, I'm trying to assign an attribute named rel to the <li> tag. So, I have replaced the {"rel" : "folder"} with {"li_attr" : { "rel" : "folder" }}. Hope it will be correct now.

i) When I execute the code $('#newtreecontainer').jstree(true).last_error(); in my console after tried to create node, I got the below error object.

data     "{"chk":"create_node","pos":1,"obj":true,"par":"4977"}"

error     "check"

id     "types_02"

plugin     "types"

reason     "valid_children prevents function: create_node"

ii) When I execute the same in my console after tried to move node, I got the below error object.

data     "{"chk":"move_node","pos":0,"obj":"4979","par":"4976"}"

error     "check"

id     "types_02"

plugin      "types"

reason      "valid_children prevents function: move_node"

Regards,

Mohan Sivalingam.

[Ivan Bozhanov]

Well then - there you have it - your valid_children option prevent you from creating the node. Btw - when creating the node you do not specify the type - rel has nothing to do with type, so if you want to create a node with a specific type, use the "type" property in the JSON.
Basically - your nodes have a type, the new node you are creating has a type, the parent's valid_children is not compatible with the node you are creating - try adding "type" : "default" or "type" : "folder", etc, to the node you are creating.

Best regards,
ivan