Drag & Drop

Options
Event
Override default behaviour
Drag a node outside of the tree
Drag an external element into the tree
Drag to an empty tree
Styling

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

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

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

<tree-root
		[nodes]="nodes"
		[options]="options"></tree-root>

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-root
		(onMoveNode)="onMoveNode($event)"
		[nodes]="nodes"
		[options]="options"></tree-root>

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-root
		[nodes]="nodes"
		[options]="options"></tree-root>

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:

JavaScript

<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 (see Action Mapping section).
The data that you pass to treeDrag will be passed to the handler in the from parameter.

Use to.parent and to.index to get the drop location.
If you add a new node to the tree, you'll need to call tree.update() afterwards.

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'}
        // Add a node to `to.parent` at `to.index` based on the data in `from`
        // Then call tree.update()
      }
    }
  }
}

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

Drag to an empty tree

To drag to an empty tree, set your nodes to an empty array.
If nodes is undefined or null, the drop slot will not appear.

Styling

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

• is-dragging-over
• is-dragging-over-disabled