• Material 3
  • Fluent
  • Bootstrap v5
  • Tailwind CSS
  • High Contrast
Preferences
Theme Selection
Theme Modes
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Drag and Drop in ASP.NET MVC Tabs 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.

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