jstree - dnd, how to restrict dropping to certain node types?

Question

I have 37 different node types. I am trying to implement drag and drop. This works but I need to restrict exactly which types can be dragged and where they can be dropped. I can't find any useful information in the docs unfortunately (http://www.jstree.com/documentation).

So far I have tried three methods:

first: defining return values of true or false in the drag_check callback depending on the node type:

$("#demo1").jstree({
    "dnd" : {
        "drag_check" : function () {

second: binding to the prepare_move.jstree event and returning true or false values depending on the node type:

.bind("prepare_move.jstree", function (e, data) {
   if (data.rslt.o.attr("typ") === "tpop") {

third: using the types plugin and defining valid children there:

$("#tree").jstree( {
    "types": {
        "type_attr": "typ",
        "valid_children": ["ap_ordner_pop", "ap_ordner_apziel", "ap_ordner_erfkrit", "ap_ordner_apber", "ap_ordner_ber", "ap_ordner_beob", "iballg", "ap_ordner_ibb", "ap_ordner_ibartenassoz"],
        "types": {
        "ap_ordner_pop": {
            "valid_children": "pop"
        },
        "pop": {
            "valid_children": ["pop_ordner_tpop", "pop_ordner_popber", "pop_ordner_massnber"],
            "new_node": "neue Population"
        },
        "pop_ordner_tpop": {
            "valid_children": "tpop"
        }

But I can still drop most nodes nearly anywhere. How must this be done? Or can you point me to a good example?

Help is much appreciated.

Answer 1

For those of you looking for answers using jstree v3. The crrm plugin has been removed, and instead you will want to use 'check_callback'.

In my case all I wanted to do was stop child items from being dragged into other child items. There may be a better way to do this but after hours of little progress, this is what worked for me.

I believe you also need to set 'check_while_dragging' dnd option to true in order to trigger 'check_callback' while dragging.

Here's my jsTree initialisation:

$("#jsTree").jstree({
            'core': {
                'data': window.treeData,
                'themes': {
                    'icons': false
                },
                'check_callback': function(operation, node, node_parent, node_position, more) {
                    // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
                    // in case of 'rename_node' node_position is filled with the new node name

                    if (operation === "move_node") {
                        return node_parent.original.type === "Parent"; //only allow dropping inside nodes of type 'Parent'
                    }
                    return true;  //allow all other operations
                }
            },
            "state": { "key": "<%=Request.QueryString["type"]%>_infotree" },
            "dnd": {
                check_while_dragging: true
            },
            "plugins": ["state", "dnd", "types"]
        })