TreeView - Drag & Drop

Drop node here

About this example

This example shows the drag&drop capabilities of DJME2 TreeView.

To allow reordering of the TreeView nodes, all you need to do is to call DragAndDrop(true) or Set EnableDropAndDrag to 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 - raised when an attempt to drag a node has been made. Used to deny dragging of nodes.
  • OnNodeDrag - raised while the user drags a node. Used for providing clues whether the drag will be successful, thus enhancing user experience.
  • OnNodeDragStop -raised when a node stop dragging.

The drag event handlers receive two arguments:he original browser event and a prepared node object element, view below for a documentation of this object (if you name your second argument 'ui')


Drop event properties

  • OnNodeDropOver - raised when a node is over the node.
  • OnNodeDropped - raised when a node has been dropped on the treeview. Used when saving the treeview state.
  • OnNodeDropOut - raised when a node drop out of the node.

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

  • ui.node - current dragging node element.
  • ui.container - when drop to targets it will be the target element
  • ui.targetNode -. current target node element when drag node to node,
  • ui.position - current position index of silbling nodes only availdable when drop node to node.
You can provide contextual drag clues with less code by providing a CSS selector to the DropAndDrag method, like this: 

<%   Ajax ().TreeView("TreeView1")
                 .DropAndDrag(true,".drop-container")
        )
        .Items(items => { /*items definition*/ })
%>