jstree move, drag and drop

$("#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!
    }
})
});

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
});

Tags:

Jstree