CODEWITHSUNDEEP
javascriptjqueryjstreejstree-dnd
Chris Spittles
Chris Spittles

Reputation: 15359

jsTree addClass isn't remembered in some instances

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

Upvotes: 3

Views: 2091

Answers (1)

vakata
vakata

Reputation: 3886

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

Upvotes: 2

Related Questions