This example illustrates how to reorder tabs and add tabs from an external source(list of components) by drag and drop. Here, you can drag and drop the items from TreeView into Tab.
In this example, the allowDragAndDrop property is used to enable drag and drop and the dragArea property is used to define the draggable area.
In this example, the list of components is rendered using the treeview component. We can drag the item from the treeview component to the tab component by using the nodeDragStop event of the treeview component and add the same item with the help of the addTab public method of Tab and remove this item from the treeview by using the removeNodes method.
In the same way, we can drag the tab item within the tab component and also add the tab item to the treeview component. Here, we can drop the tab item in the treeview component by using the dragged event of the tab component. In this case, we can remove the dropped item from tab with the help of the removeTab public method and add the item to the treeview in its addNodes public method.