Search code examples
jstreejstree-dnd

jsTree get siblings of a node

I'm using drag and drop with jsTree, and when I drag a node to a new position, I have to update not only its position, but the positions of its siblings too in the database.

Here's an example:

img1

If I drag New node into node Gamme 1, now it's siblings are gamme 501 and gamme 500

img2

Getting data about the moved node and updating it's position in db is not a problem:

.on("move_node.jstree", function (e, data) {
    console.log(data);
    $.ajax({
        type: "POST",
        url: Routing.generate('saveGammeNewPosition'),
        data: {
            gammeId: data.node.id,
            newParentId: data.node.parent,
            position: data.position
        }
    });
})

But I have no idea how to get information about the new siblings of a node that has been moved.

When I do something like this, unfortunately I get no data on position as the json jsTree accepts has no position attribute:

$('#tree').jstree(true).get_json(data.node.parent, {flat: true})

So is there a way I can get data on positions of the siblings?

Solution

  • You can get the new parent of the node in the move_node event and use that to get its immediate children.

    function getSiblings(nodeID, parent) {
    var tree = $('#tree').jstree(true),
        parentNode = tree.get_node(parent),
        aChildren = parentNode.children,
        aSiblings = [];

    aChildren.forEach(function(c){
        if(c !== nodeID) aSiblings.push(c);
    });
    return aSiblings;
}

$('#tree').on("move_node.jstree", function (e, data) {
    var aSiblings = getSiblings(data.node.id, data.parent);
    console.log(aSiblings);
});