Drag and Drop
enableDragDrop
Enabling Drag and drop you can move a node over another to change its parent.
enableDragDrop: true,
In the example bellow drag and drop one of the nodes to see how it works
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: