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

Set the allowDrop option to either a boolean or a function:

Boolean value - decides if drop is allowed or not on the tree
Function - decides on a per node basis if drop is allowed. The function receives:
- element - the dragged element
- to - drop location structure
  - parent - the parent node
  - index - the index inside the parent's children where the element is dropped

options = {
  allowDrag: true,
  allowDrop: (element, to) {
    // return true / false based on element, to.parent, to.index. e.g.
    return to.parent.hasChildren;
  }
}

<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

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

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.
Use [treeAllowDrop] Input to specify a function that runs onDragOver, and decides if the dropping is allowed or not.
For example:

<div (treeDrop)="onDrop($event)"
     [treeAllowDrop]="allowDrop.bind(this)"></div>

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

  allowDrop(element) {
    // Return true/false based on 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:

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
is-dragging-over-disabled