jsTree addClass isn't remembered in some instances

Question

Using jsTree and the drag and drop plugin, I'm trying to illustrate when a node's position has been changed. Using the move_node.jstree event, I add a class of isChanged to the node that is moved and this works fine. However, if I move a node that is a sibling of one that has already been moved, the previously moved item has its isChanged class stripped.

Is there a way I can preserve the isChanged class on all moved nodes?

Demo

(Move the nodes on the same branch; only one with have the isChanged class)

Here is the code for completeness:

$('#treeView').jstree({
    "core": {
        "check_callback": true
    },
    "plugins": ["dnd"]
})
.on('move_node.jstree', function (e, data) {
    
    $("#" + data.node.a_attr.id).addClass("isChanged");
    
    console.log(data.node.a_attr.id);
    
});

Answer 1

In order to persist the class you also need to add it to the internal jsTree representation of the node, otherwise the class will be lost when the node is redrawn.

.on('move_node.jstree', function (e, data) {
    $("#" + data.node.a_attr.id).addClass("isChanged");
    if(data.node.a_attr.class) {
      if(data.node.a_attr.class.indexOf('isChanged') === -1) {
        data.node.a_attr.class += ' isChanged';
      }
    }
    else {
      data.node.a_attr.class = 'isChanged';
    }   
    console.log(data.node.a_attr.id);
});