# Drag and Drop The TreeView allows the user to reorder its nodes or transfer them to another TreeView instance through the drag-and-drop functionality. ## Setup To activate the drag-and-drop functionality, apply the [`kendoTreeViewDragAndDrop`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropdirective) directive on a TreeView component. The directive allows the nodes to be dragged and the TreeView will emit the following events: * [`nodeDragStart`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#nodedragstart)—Fires when the dragging begins. If prevented, the node won't be dragged. * [`nodeDrag`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#nodedrag)—Fires during dragging. * [`nodeDrop`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#nodedrop)—Fires when a node is dropped on a valid target. If prevented or marked as invalid, the subsequent [`addItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#additem) and [`removeItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#removeitem) events will not be fired. * [`addItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#additem)—Fires on the targeted TreeView after the node is dropped. * [`removeItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#removeitem)—Fires on the source TreeView after the node is dropped. * [`nodeDragEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#nodedragend)—Fires when the dragging ends. In the following example the event arguments are logged to the console as they occur. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/events/source.txt) ## Built-in Editing Directive The [`kendoTreeViewDragAndDrop`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropdirective) directive allows items to be dragged and triggers the corresponding events. It doesn't, however, make any changes to the nodes order out-of-the-box, as the TreeView does not manage its own data. Persisting and displaying the changes during dragging and dropping can be achieved either by manually handling the corresponding events and mutating the data, or by using the [`kendoTreeViewDragAndDropEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropeditingdirective) directive. The latter uses an [`EditService`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/editservice) which handles the [`addItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#additem) and [`removeItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#removeitem) events. You can supply your own [`EditService`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/editservice) to the directive, or use it in combination with one of the two data binding directives. ### Using with the Hierarchy Binding Directive When the [`kendoTreeViewDragAndDropEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropeditingdirective) directive is used in combination with the [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) directive, the data binding directive sets the [`EditService`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/editservice) of the editing directive. The initially passed data gets updated on every drag-and-drop interaction with no further setup. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/hierarchy-editing/source.txt) ### Using with the Flat Binding Directive The [`kendoTreeViewDragAndDropEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropeditingdirective) directive can also be used with the [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective) directive to get out-of-the-box data editing. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/flat-data-editing/source.txt) ## Remote Binding To display the changes from the drag-and-drop interaction, a local data set with the fetched nodes has to be persisted and mutated. ### Flat Homogeneous Data The following example showcases a custom directive that handles the remote data binding and editing during dragging and dropping. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/flat-data-crud/source.txt) ### Hierarchical Heterogeneous Data When using the dragging and dropping with heterogeneous data, some constraints need to be applied on which the drag and drop operations are allowed. The following example demonstrates remote binding to heterogeneous data, where items are allowed to be moved only in the same hierarchical level. Categories can only be reordered, products can only be reordered or transferred to another category. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/heterogeneous-data-crud/source.txt) ## Multiple TreeViews The drag-and-drop directive allows items to be transferred from one TreeView to another. To mark a TreeView instance as a valid drop target, list it under the [`dropZoneTreeViews`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropdirective#dropzonetreeviews) property of the other TreeView. Note that the [`nodeDrop`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#nodedrop) and [`addItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#additem) events are triggered on the target TreeView, while the [`removeItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#removeitem) event on the source TreeView. The following example also demonstrates the node copy functionality ([`allowCopy`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropdirective#allowcopy)), and a custom `emptyItemPlaceholder` directive which adds an item placeholder to the TreeView once all its items are transferred away. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/multiple-trees/source.txt) ## Auto-Scrolling When the content of the TreeView overflows, the first scrollable container starting from the TreeView element and going upwards will be scrolled when the drag clue is moved close to the top or the bottom of the container. To disable this functionality, set the [`autoScroll`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropdirective#autoscroll) input property to `false`. By default, the scrolling will be performed by 1 pixel at every 1 millisecond, when the dragged item reaches the top or the bottom of the scrollable container. To customize this behavior, bind the [`autoScroll`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropdirective#autoscroll) option to a [`DragAndDropScrollSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropscrollsettings) object with the preferred [`step`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropscrollsettings#step) and [`interval`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropscrollsettings#interval) values. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/auto-scroll/source.txt) ## Expanded, Selected, and Checked States During dragging and dropping the indices of the reordered nodes are updated in accordance with their new position. Thus, it is not advisable to rely on indices when persisting the expanded, selected, or checked state. The following example showcases how the state of each node is tracked by an object property value. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/persist-state/source.txt) ## Templates The drag clue and drop hint can easily be customized according the design needs. * To customize the drag clue, use the [`kendoTreeViewDragClueTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/dragcluetemplatedirective). * To customize the drop hint, use the [`kendoTreeViewDropHintTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/drophinttemplatedirective). [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/drag-and-drop/templates/source.txt) ## Suggested Links * [Angular TreeView Homepage](https://www.telerik.com/kendo-angular-ui/treeview) * [API Reference of the Angular TreeView](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api) * [API Reference of the `DragAndDropDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropdirective) * [API Reference of the `DragAndDropEditingDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/draganddropeditingdirective) * [API Reference of the `TreeViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent)