This example shows the drag&drop capabilities of Telerik TreeView for ASP.NET MVC.

To allow reordering of the TreeView nodes, all you need to do is to call DragAndDrop(true).

If you want to process any user action (i.e. so that you save it to a database), you have to attach handlers to the drag&drop client-side events, namely:

• OnNodeDragStart (cancellable) - raised when an attempt to drag a node has been made. Used to deny dragging of nodes.
• OnNodeDragging - raised while the user drags a node. Used for providing clues whether the drag will be successful, thus enhancing user experience.
• OnNodeDrop (cancellable) - raised when a node is dropped. Used for processing of the drop result.
• OnNodeDropped - raised when a node has been dropped on the treeview. Used when saving the treeview state.
• OnNodeDragCancelled - raised when the user cancels a drag by hitting the Esc key. Used for cleaning up any artifacts from the dragging.

You can provide contextual drag clues with less code by providing a CSS selector to the DropTargets property, like this:

<%= Html.Telerik().TreeView()
        .Name("TreeView")
        .DragAndDrop(settings => settings
            .DropTargets(".drop-container")
        )
        .Items(items => { /*items definition*/ })
%>