@progress/kendo-treeview-react-wrapper/docs/drag-and-drop.md

Kendo UI TreeView wrapper for React

---
title: Dragging and Dropping
page_title: Dragging and Dropping - TreeView - Kendo UI Wrappers for React
description: "Use the drag-and-drop functionality of the Kendo UI TreeView wrapper for React."
slug: drag_and_drop_treeview
position: 3
---

# Dragging and Dropping

When the drag-and-drop functionality is enabled, the user can drag and drop the nodes of a TreeView between all levels.

The feature also provides tooltips that help users indicate where the node is will be dropped.

{% meta height:460 %}
```jsx-preview
class TreeViewContainer extends React.Component {

        constructor(props) {
            super(props);
            this.dragAndDrop = true
            this.dataSource = [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                            { id: 3, text: "about.html", spriteCssClass: "html" },
                            { id: 4, text: "index.html", spriteCssClass: "html" },
                            { id: 5, text: "logo.png", spriteCssClass: "image" }
                        ]
                    },
                    {
                        id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                            { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                        ]
                    },
                    {
                        id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                            { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                            { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }]
        }

    render() {
        return (
            <div>
                <TreeView dataSource={this.dataSource}
                    dragAndDrop={this.dragAndDrop}/>
            </div>
        );
     }
    }
ReactDOM.render(
    <TreeViewContainer/>,
    document.querySelector('my-app')
);
```
{% endmeta %}


## Suggested Links

* [Kendo UI TreeView for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/treeview/overview)
* [API Reference of the TreeView Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview)