Using the drag and drop feature to move elements in TreeView

In a TreeView widget, elements in the tree can be dragged-and-dropped to various levels. This is applicable not only to child elements, but also to top-level nodes in the tree.

How to do it…

To enable the drag and drop feature, specify the dragAndDrop property as true while initializing the TreeView widget, as shown in the following code snippet:

$('#treeView').kendoTreeView({
  dragAndDrop: true,
  
  dataSource: [{
    text: "Directory1",
    items: [ 
      { text: "File1.txt"}, 
      { text: "File2.txt"}
    ],
    expanded: true
  }, {
    text: "Directory2",
    items: [ 
      { text: "File3.txt"}, 
      { text: "File4.txt"}
      ]
    }, {
    text: "Directory3",
    items: [ 
      { text: "File5.txt"}, 
      { text: "File6.txt"}
      ]
    }
  ]

});

Here, when the dragAndDrop property is set to true, the elements in TreeView can be moved between various levels in the tree.

As the user drags the node, various events are...