# 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`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewprops#draggable) property to `true`.
2. Handle the dispatched `drag` events.

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

* [The `moveTreeViewItem` function](https://www.telerik.com/kendo-vue-ui/components/treeview/api/movetreeviewitem)—A helper function which moves a TreeView item in an immutable way.
* [The `TreeViewDragAnalyzer` class](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewdraganalyzer)—An API for analyzing the `drag` events of the TreeView.
* [The `TreeViewDragClue` component](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewdragclue)—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`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/processtreeviewitems) function.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/treeview/drag/single/source.txt)

## 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/treeview/drag/multiple/source.txt)

## Suggested Links

* [`moveTreeViewItem`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/movetreeviewitem)
* [`TreeViewDragAnalyzer`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewdraganalyzer)
* [`TreeViewDragClue`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewdragclue)
* [`onItemDragOver`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewitemdragoverevent)
* [`onItemDragEnd`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewitemdragendevent)
* [`processTreeViewItems`](https://www.telerik.com/kendo-vue-ui/components/treeview/api/processtreeviewitems)
* [API Reference of the TreeView](https://www.telerik.com/kendo-vue-ui/components/treeview/api/treeviewprops)