New to Kendo UI for Vue? Start a free 30-day trial

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:

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.
Example
View Source
Change Theme:

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.
Example
View Source
Change Theme: