Show / Hide Table of Contents

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

BALKAN Code 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:
BALKAN Code Edit in BALKAN Code

In this article