jstree move, drag and drop

Question

I want to implement the move functionality for a node in jstree. Is it the move that needs to be implemented or the drag and drop? Also, it would be nice to have working code for binding the container to event and the event code.

Answer 1

$("#demo1").jstree({
....
.bind("move_node.jstree", function (e, data) {

    /*
    requires crrm plugin

    .o - the node being moved
    .r - the reference node in the move
    .ot - the origin tree instance
    .rt - the reference tree instance
    .p - the position to move to (may be a string - "last", "first", etc)
    .cp - the calculated position to move to (always a number)
    .np - the new parent
    .oc - the original node (if there was a copy)
    .cy - boolen indicating if the move was a copy
    .cr - same as np, but if a root node is created this is -1
    .op - the former parent
    .or - the node that was previously in the position of the moved node */

    var nodeType = $(data.rslt.o).attr("rel");
    var parentType = $(data.rslt.np).attr("rel");

    if (nodeType && parentType) {
        // TODO!
    }
})
});

Answer 2

The above approaches do not work with the latest versions of jstree (3.3.7 as of today).

The first line of Bojin's answer still holds true. To implement rules, you can use core.check_callback or possibly, the types plugin; the crrm plugin doesn't exist anymore. Bind to move_node.jstree to perform some action on completion of move (drop). By default, the dnd plugin allows re-ordering (dropping between two nodes) and copying (Ctrl + drag), in addition to moving a node. The code snippet below shows how to disable these additional behaviors.

$('#treeElement').jstree({
    'core': {
        'check_callback': CheckOperation,
        ...
    },
    'plugins': ['dnd']
})
.bind("move_node.jstree", function(e, data) {
    //data.node was dragged and dropped on data.parent
});

function CheckOperation(operation, node, parent, position, more) {
    if (operation == "move_node") {
        if (more && more.dnd && more.pos !== "i") { // disallow re-ordering
            return false;
        }
        ... more rules if needed ...
        else {
            return true;
        }
    }
    else if (operation == "copy_node") {
        return false;
    }
    return true;
}

Answer 3

You only need to use the dnd plugin if you don't need to enforce any move rules(don't allow certain nodes to be moved to other nodes etc) If you need to enforce move rules, you can add the crrm plugin.

See the Reorder only demo of the dnd pluign documentation for an example of this. The documentation is very poor, so you will have to use the developer tool on your browser to see what the properties of the parameter for the check_move callback are. For the example in the documentation, m.o refers to your dragged node and m.r refers to your destination node.

You will also likely need to be notified when a node is moved, so bind to the move_node.jstree event when you initialize the tree:

  $("#treeHost").jstree({
  ...
  }).bind("move_node.jstree", function (e, data) {
        // data.rslt.o is a list of objects that were moved
        // Inspect data using your fav dev tools to see what the properties are
        });
    })