Drag and drop

14 Aug 20181 minute to read

To perform drag and drop operation in TreeView, specify allowDragAndDrop as true. It allows you to drag and drop node in all level of same TreeView.

HTML

<ej-treeview id='treeview' [fields]='field' [allowDragAndDrop]='allowDragAndDrop'>
 </ej-treeview>

NOTE

TreeView provides much easier option to drop the dragged nodes at any levels by indicator lines with icons.

Position Indicators

TreeView provides much easier option to drop the dragged nodes at any levels by indicator lines with icons such as line, plus/minus and restrict icons while dragging and dropping the nodes. It represents exact position where the node to be dropped as sibling or child. Refer below screen shot of position indicator.

Indicators	description
Plus icon	represents the dragged node to be added as child of targeted node
Minus with restrict icon	represents the dragged node not to be dropped at the hovered region
In between icon	represents the dragged node to be dropped in between the nodes as siblings

Restriction

You can restrict the dragged nodes to be dropped at siblings or children’s level by using allowDropSibling and allowDropChild property.

HTML

<ej-treeview id='treeview' [fields]='field' [allowDragAndDrop]='allowDragAndDrop' 
   [allowDropSibling]='allowDropSibling'>
 </ej-treeview>

Drag and Drop between Trees

You can drag and drop tree nodes between two TreeView by setting allowDragAndDrop as true along with allowDragAndDropAcrossControl as true.
The nodeDrag, nodeDragStart, nodeDragStop and
nodeDropped event occurs based on Treeview node drag and drop state.

HTML

<ej-treeview id='treeview' [fields]='field' [allowDragAndDrop]='allowDragAndDrop' 
   [allowDragAndDropAccessControl]='allowDragAndDropAccessControl' 
   [allowDropSibling]='allowDropSibling' 
   [allowDropChild]='allowDropChild' >
 </ej-treeview>

For more details about drag and drop between TreeView, refer the sample here.