Drag & Drop

Use

Allow drag & drop using `allowDrag` flag in tree options

options = {
  allowDrag: true
}

<Tree
		[nodes]="nodes"
		[options]="options"></Tree>

Listen

Listen to node move event that is triggered by drag & drop

options = {
  allowDrag: true
}

onMoveNode($event) {
  console.log(
  	"Moved",
  	$event.node.data.name,
  	"to",
  	$event.to.node.data.name,
  	"at index",
   	$event.to.index);
}

<Tree
		(onMoveNode)="onMoveNode($event)"
		[nodes]="nodes"
		[options]="options"></Tree>

Override

use actionMapping to override the default drag behaviour.
You can use getDragNode() to get an object that has:

• node: the parent node
• index: the index inside the parent's children that points to the dragged node

Override drag & drop action in actionMapping

options = {
  allowDrag: true,
  actionMapping: {
  	mouse: {
      drop: (tree:TreeModel, node:TreeNode, $event:any, to:{ node:TreeNode, index: number }) => {
        // use tree.getDragNode() to get the current dragged node (parent & index)
        // use to.node and to.index to get the parent node and index of drop location
        // use TREE_ACTIONS.MOVE_NODE to invoke the original action
      }
    }
  }
}

<Tree
		[nodes]="nodes"
		[options]="options"></Tree>