• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Mode Selection
Theme Selection
*Translated by Google Translator.
Essential Studio
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.

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.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing