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:

Enable Drag and Drop

Drag and Drop Events

We have onDrag and onDrop event listeners

If you want to conditionally cancel drag & drop operation use onDrop event listener:

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

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

Drag and Drop event listeners

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={OrgChartJS.movable.node}
// movable={OrgChartJS.movable.tree}
// movable={OrgChartJS.movable.detachTree}

You can test the functionality in this example:

Movable