jstree prevent moving node into child nodes

Question

So I've been using jstree for a while now, but still can't get a handle on it, it's pretty much a headache but well, it was decided we were gonna work with it. The data I'm using comes from HTML (no JSON involved). The issue I'm having is that I'm not sure how to set that some nodes are not folders. Every node has a class and based on that class I'm able to change it's icon but if the user tries to send any node inside these nodes that are not supposed to be folders they will be able. I need to prevent this, one way or the other but every thing I've test so far has not work at all.

$("jstree").jstree({
            "core": {
                "animation": 0,
                "check_callback": true
            },
            rules: { draggable: "all" },
            "dnd": {
                "drop_finish": function (data) {
                    if (data.o.attr("rel") === "ds") {
                        //update chart with new data here?
                        //using data.o.attr("id")
                    }
                },
                "drag_check": function (data) {
                    if (data.r.attr("rel") != "ds") {
                        return false;
                    }
                    return {
                        after: false,
                        before: false,
                        inside: true
                    };
                }
            },
            "crrm": {
                "move": {
                    "check_move": function (data) {
                        // alert(data.r.attr("id"));
                        if (data.r.attr("id") == "999") {
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                }
            },

            "plugins": ["dnd", "crrm"]
        });

That's what I'm using to create my tree. Also, I cannot disable drag and drop since some items should be moved if the user wants but obviously the user shouldn't be able to drag something into anything that is not a folder.

Thanks in advance for the help,

Regards,

Adrian.

Answer 1

I accomplished this by using the Types plugin jstree plugins. There you can define types of nodes and set the valid_children variable which types are allowed to be children. That means that users also cannot DnD nodes of the restricted type into the node.

In my example below I have a type "book" that could have "folder" and "file" nodes as children. The "file" type cannot have any children at all, because valid_childrenis defined empty.

    $('#' + tree_id)
  .jstree({
    'core' : {
      'check_callback' : true, //needed to enable create, remove, rename...  events
      "themes" : {
        "stripes" : true
      }
    },
    "types" : {
      "book" : {
        "valid_children" : ["folder", "file"],
        "icon" : "img/1397762742_book.png"

      },
      "folder" : {
        "valid_children" : ["folder", "file"],
        "icon" : "img/1397751666_folder.png"

      },
      "file" : {
        "valid_children" : [],
        "icon" : "img/1397752227_page.png"
      }
    },
    "contextmenu" : {
      "items" : customMenu
    },
    "plugins" : ["sort", "dnd", "contextmenu", "types"]

  });

The type attribute can be set when adding a new node

tree.create_node("#", {
        "text" : "sample node",
        "type" : "file"
      });

or by using the set_type function. API