Overview of Drag and Drop in Angular TabStrip

Created: 14 Jan 2019

IntegralUI TabStrip component for Angular comes with built-in support for drag and drop operations. You can drag and drop tabs from one position to another within the same or to a different TabStrip. During this process, several drag and drop events are fired which you can handle in your code and further enhance the drag drop functionality.

This article contains general information about each topic related to drag and drop of tabs in Angular TabStrip.

In this demo, there is a single TabStrip component with few tabs placed on top side. To start drag and drop of tabs, left click and hold on a tab and then start dragging it horizontally. When tab is dragged it becomes detached from the tab strip and you can move it freely to another position. During tab movement, other tabs will shift to left or right side making space and showing where the tab will place once it drops. On release, the tab will place at target position.

General Drag Drop Conditions

By default drag and drop of tabs is disabled. There are two general properties that govern whether drag drop is allowed or not:

• allowDrag - determines whether dragging of tabs is allowed
• allowDrop - determines whether tabs can drop

Initially, allowDrag is set to false and allowDrop is set to true. This means that in order to start drag and drop for tabs, the allowDrag property must be set to true. You can set this through HTML:

• HTML

<div class="app-block" #application>
    <iui-tabstrip [controlStyle]="ctrlStyle" [tabs]="data" [tabSpacing]="2" [allowDrag]="true" >
       <iui-tab *ngFor="let tab of data" text="{{tab.text}}" icon="{{tab.icon}}">
            <div class="tbs-ovw-tab-content">{{tab.body}}</div>
        </iui-tab>
    </iui-tabstrip>
</div>
                            

Once the tab dragging is enabled, you can left-click on a tab header and while holding the mouse button pressed, move the tab to another position. This will detach the dragged tab from its current position within the tab strip. Once detached and moving, other tabs will shift its position showing an empty space that represents the target position where the tab will drop.

How to Exclude a Tab from Drag and Drop

In cases that you have multiple tabs, you may want some of them to remain static. There is a built-in feature that allows you to specify which tab is allowed to be dragged and over which tab, the drop can take place.

In similar way like for the TabStrip component, each tab has the same properties allowDrag and allowDrop. This allows you to specify the drag and drop conditions on individual level. To prevent tab from dragging, just set the allowDrag to false.

• Angular
• HTML

public data: Array;

constructor(){
    this.data = [
        { 
            icon: 'tab-icon notes',
            text: 'Notes',
            body: 'Duis ac tellus et risus ...'
        },
        { 
            icon: 'tab-icon album',
            text: 'Music',
            body: 'Pellentesque malesuada ...'
        },
        { 
            icon: 'tab-icon star-empty',
            text: 'Favorites',
            body: 'Fusce convallis, mauris ...'
        },
        { 
            allowDrag: false,
            icon: 'tab-icon library',
            text: 'Books',
            body: 'Curabitur pretium tincidunt lacus ...'
        },
        { 
            icon: 'tab-icon sports',
            text: 'Sports',
            body: 'Pellentesque malesuada nulla a mi. Duis sapien sem ...'
        }
    ];
}
                            

<div class="app-block" #application>
    <iui-tabstrip [controlStyle]="ctrlStyle" [tabs]="data" [tabSpacing]="2" [allowDrag]="true" >
       <iui-tab *ngFor="let tab of data" text="{{tab.text}}" icon="{{tab.icon}}" [allowDrag]="tab.allowDrag == false ? false : true">
            <div class="tbs-ovw-tab-content">{{tab.body}}</div>
        </iui-tab>
    </iui-tabstrip>
</div>
                            

In this example, you cannot move the tab named Books, it has allowDrag property set to false.

In addition, in order to prevent tabs to drop over specific tab, set the allowDrop property of the target tab to false.

Overview of TabStrip Drag and Drop Events

During tab drag and drop operation, the tabOrderChanged event is fired that you can handle in your code. The event data includes the tab which position has changed.

• Angular
• HTML

tabsReordered(e: any){
    if (e.tab)
        console.log("Order changed for tab: ", e.tab.text);
}  
                            

<div class="app-block" #application>
    <iui-tabstrip [controlStyle]="ctrlStyle" [tabs]="data" [tabSpacing]="2" [allowDrag]="true" (tabOrderChanged)="tabsReordered($event)">
       <iui-tab *ngFor="let tab of data" text="{{tab.text}}" icon="{{tab.icon}}" [allowDrag]="tab.allowDrag == false ? false : true">
            <div class="tbs-ovw-tab-content">{{tab.body}}</div>
        </iui-tab>
    </iui-tabstrip>
</div>
                            

You can create a handler function for this event and add some custom action whenever tab changes its position on drop.

How to Move Tabs Manually

You can also move tabs within the same TabStrip manually, that is within the code. For this purpose just set the new position of specific tab using the splice method of the tab data:

• Angular

constructor(protected commonService: IntegralUICommonService){}

moveTab(tab: any, newIndex: number){
    let currentIndex = this.data.indexOf(tab);
    this.commonService.moveObject(currentIndex, newIndex, this.data);
}
                            

Conclusion

Drag and Drop is a user-friendly way to change the tab order. It allows user to reorder tabs during run time, quickly and efficiently. IntegralTabStrip for Angular comes with built-in support for tab drag and drop with options to choose when and how drag and drop will take place.

The TabStrip component is part of IntegralUI Web.