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
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.