Drag & Drop

Options

Set the allowDrag option to enable the default behaviour:

• Drag and drop inside the tree
• Drag and drop between trees
• The default action is to move the node to its new location

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

options = {
  allowDrag: true
}

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

Event

You can listen to onMoveNode events and get the moved node, and its new location in the tree

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

options = {
  allowDrag: true
}

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

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

Override default behaviour

use actionMapping to override the default drag behaviour.
You get a 'from' and 'to' objects:

• from:

• If dragging a node, then from === the dragged node

• If dragging something else, it is the draggedElement (see treeDrag directive below)

• to:

• parent: the parent node

• index: the index inside the parent's children where the node should be dropped

Override drag & drop action in actionMapping

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

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

Drag a node outside of the tree

You can use the (treeDrop) directive to allow dragging nodes to an external element.
Use $event.element inside the callback.
For example:

JavaScript

<div (treeDrop)="onDrop($event)"></div>

  onDrop($event) {
    // Dropped $event.element
  }

Drag an external element into the tree

You can use the [treeDrag] directive to allow dragging external elements into the tree.
Then use a custom action to handle the drop.
You specify the element that will be reported as 'from' in actionMapping (instead of the node when dragging a tree node).
Use [treeDragEnabled] boolean Input to decide if the drag is enabled or not.
For example:

JavaScript

options = {
  actionMapping: {
    mouse: {
      drop: (tree, node, $event, {from, to}) => {
        console.log('drag', from, to); // from === {name: 'first'}
      }
    }
  }
}
enabled = true

<p [treeDrag]="{name: 'first'}" [treeDragEnabled]="enabled">Drag me!</p>
<p [treeDrag]="{name: 'second'}">Drag me as well!</p>

Styling

The following classes are available for dragging over elements, based on allowDrop:

• is-dragging-over