• Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • Fabric
  • Fabric Dark
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Drag and Drop in ASP.NET Core Tab Control

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.

DEMO
SOURCE
List of Components

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.