Drag and Drop

enableDragDrop

Enabling Drag and drop you can move a node over another to change its parent.

 
    var chart = new OrgChart(document.getElementById("tree"), {
        enableDragDrop: true,   
        ...
    });

In the example bellow drag and drop one of the nodes to see how it works

Edit in BALKAN Code

Drag and Drop Events

 
    var chart = new OrgChart(document.getElementById("tree"), {
        ...
    });

    chart.on('drop', function (sender, draggedNodeId, droppedNodeId) {
        if (draggedNodeId == 1){
            return false;
        }

        if (droppedNodeId == 4){
            return false;
        }
    });

    chart.load([
        { id: 0 },
        { id: 1, pid: 0 },
        { id: 2, pid: 0 }
    ])

Movable

Using the movable option, you can move a node to change its position in the tree without changing the data structure. You have 3 options:

            var chart = new OrgChart(document.getElementById("tree"), {
                movable: OrgChart.movable.node, // moves the node
                // movable: OrgChart.movable.tree, // moves a node with the tree below
                // movable: OrgChart.movable.detachTree, // detaches the tree
                ...
            });
        

Edit in BALKAN Code