3

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);
    
});
Community
  • 1
  • 1
Chris Spittles
  • 15,023
  • 10
  • 61
  • 85

1 Answers1

2

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);
});
vakata
  • 3,726
  • 1
  • 17
  • 31
  • Thanks @vakata I get the following error though because `class` isn't a property of `li_attr`? **Cannot read property 'indexOf' of undefined** The error can be seen in this version of the fiddle: http://jsfiddle.net/chrissp26/9e3vdn0y/4/ – Chris Spittles May 06 '15 at 06:10
  • I just edited my answer - sorry about omitting the check. I also did not see you were trying to update the class on the anchor element, not the list-item one. Here is the updated fiddle: http://jsfiddle.net/9e3vdn0y/5/ – vakata May 07 '15 at 08:18