Dragging and Dropping

The drag-and-drop functionality enables the user to move the TreeView items by dragging and dropping them within a single tree or across multiple trees.

Basics

To implement dragging and dropping in the TreeView:

1. Set the draggable property to true.
2. Handle the dispatched drag events.

To ease the event handling, the TreeView provides the following utilities:

• The moveTreeViewItem function—A helper function which moves a TreeView item in an immutable way.
• The TreeViewDragAnalyzer class—An API for analyzing the drag events of the TreeView.
• The TreeViewDragClue component—A component which renders a clue when an item is dragged.

Moving Items within a Single Tree

The following example demonstrates how to:

• Implement the drag-and-drop functionality within a single TreeView by using all drag-and-drop utilities.
• Update the expanded and selected item fields by using the processTreeViewItems function.

Moving Items across Multiple Trees

The following example demonstrates how to:

• Implement the drag-and-drop functionality across two TreeViews by using all drag-and-drop utilities.
• Directly update the expanded and selected item fields.

Suggested Links

• moveTreeViewItem
• TreeViewDragAnalyzer
• TreeViewDragClue
• TreeViewDragClueProps
• onItemDragOver
• onItemDragEnd
• processTreeViewItems
• API Reference of the TreeView