Drag and Drop

Move nodes within the hierarchy or change their position by simply dragging and dropping them.

enableDragDrop

Enabling drag and drop allows you to move a node over another to change its parent.

enableDragDrop: true,

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

Edit in BALKAN Code

Drag and Drop Events

If you want to conditionally cancel drag & drop operation use onDrop event listener before chart.load():

chart.onDrop((args) => {
    if (args.dragId == 1){
        return false;
    }

    if (args.dropId == 4){
        return false;
    }
});

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:

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

You can test the functionality in this example:

Edit in BALKAN Code