Dragging and Dropping

The TreeView enables you to implement the drag-and-drop functionality for its items.

The following example demonstrates how to enable the dragging and dropping by using the drag-and-drop property.

<div id="vueapp" class="vue-app">
    <h4>Treeview One</h4>
    <kendo-treeview id="treeview-left" :drag-and-drop="true">
        <kendo-treeview-item :text="'Brazil'" :expanded="true">
            <kendo-treeview-item :text="'Tables & Chairs'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Sofas'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Occasional Furniture'"></kendo-treeview-item>
        </kendo-treeview-item>
        <kendo-treeview-item :text="'Decor'" :expanded="true">
            <kendo-treeview-item :text="'Bed Linen'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Curtains & Blinds'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Carpets'"></kendo-treeview-item>
        </kendo-treeview-item>
    </kendo-treeview>
    <h4 style="padding-top: 2em;">Treeview Two</h4>
    <kendo-treeview id="treeview-right" :drag-and-drop="true">
        <kendo-treeview-item :text="'Storage'" :expanded="true">
            <kendo-treeview-item :text="'Wall Shelving'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Floor Shelving'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Kids Storage'"></kendo-treeview-item>
        </kendo-treeview-item>
        <kendo-treeview-item :text="'Lights'" :expanded="true">
            <kendo-treeview-item :text="'Ceiling'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Table'"></kendo-treeview-item>
            <kendo-treeview-item :text="'Floor'"></kendo-treeview-item>
        </kendo-treeview-item>
    </kendo-treeview>
</div>
<style>
    #treeview-left,
    #treeview-right
    {
        overflow: visible;
    }
</style>
Vue.use(TreeViewInstaller);

new Vue({
    el: "#vueapp"
})

In this article