Drag and drop in Angular Tab component

22 Sep 202524 minutes to read

The Tab component provides built-in drag and drop functionality that enables users to reorder tab items dynamically by dragging them to different positions. This interactive feature enhances user experience by allowing flexible content organization.

Enable drag and drop by setting the allowDragAndDrop property to true. Once enabled, users can drag tab items and drop them at any desired location within the defined drag area.

Drag and drop events and configuration

The Tab component provides comprehensive event handling and configuration options for drag and drop operations:

  • Drag Prevention: Use the onDragStart event to prevent dragging of specific items. This event triggers when dragging begins, allowing you to cancel the operation based on your conditions.

  • Drop Prevention: Use the dragged event to prevent dropping of items at specific locations. This event triggers when the drag action completes, enabling conditional drop validation.

  • Drag Area Restriction: The dragArea property defines the boundary within which tab items can be dragged. Tab items cannot be moved outside this specified area, providing controlled drag behavior.

Event sequence

The drag and drop operation follows this event sequence:

  1. onDragStart - Triggers before dragging begins, allowing drag prevention
  2. dragging - Triggers continuously while the tab item is being dragged
  3. dragged - Triggers when the tab item is successfully dropped on the target location

The following sample demonstrates basic drag and drop functionality with the allowDragAndDrop property enabled:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { TabAllModule } from '@syncfusion/ej2-angular-navigations'




import { Component } from '@angular/core';

/**
 * Tab Component
 */

@Component({
imports: [
        FormsModule,
        TabAllModule,
        
    ],


standalone: true,
    selector: 'app-container',
    template: `<div id='tabparent'><ejs-tab id="draggableTab" heightAdjustMode='Auto' [allowDragAndDrop]='true' dragArea='#tabparent'>
            <e-tabitems>
                <e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem>
                <e-tabitem [header]='headerText[1]' [content]="content1"></e-tabitem>
                <e-tabitem [header]='headerText[2]' [content]="content2"></e-tabitem>
                <e-tabitem [header]='headerText[3]' [content]="content3"></e-tabitem>
            </e-tabitems>
        </ejs-tab></div>`
})

export class AppComponent {
    public headerText: Object = [{ 'text': 'India' }, { 'text': 'Australia' }, { 'text': 'USA' }, { 'text': 'France' }];

    public content0: string = 'India officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.';

    public content1: string = 'Australia, officially the Commonwealth of Australia, is a country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the world sixth-largest country by total area. Neighboring countries include Indonesia, East Timor and Papua New Guinea to the north; the Solomon Islands, Vanuatu and New Caledonia to the north-east; and New Zealand to the south-east.';

    public content2: string = 'The United States of America (USA or U.S.A.), commonly called the United States (US or U.S.) and America, is a federal republic consisting of fifty states and a federal district. The 48 contiguous states and the federal district of Washington, D.C. are in central North America between Canada and Mexico. The state of Alaska is west of Canada and east of Russia across the Bering Strait, and the state of Hawaii is in the mid-North Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean.';

    public content3: string = 'France, officially the French Republic is a sovereign state comprising territory in western Europe and several overseas regions and territories. The European part of France, called Metropolitan France, extends from the Mediterranean Sea to the English Channel and the North Sea, and from the Rhine to the Atlantic Ocean; France covers 640,679 square kilo metres and as of August 2015 has a population of 67 million, counting all the overseas departments and territories.';
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Drag and drop item between tabs

It is possible to drag and drop the tab items between two tabs, by manually saving those dropped items as new tab item data through the addTab method of Tab and removing the dragged item through the removeTab method of Tab.

In this example, we have used the tab control as an external source, and the item from the tab component is dragged and dropped onto another Tab. Therefore, it is necessary to use the onDragStart and dragged event of the Tab component, where we can form an event object and save it using the addTab method of the Tab and remove the dragged item through removeTab method of Tab using the dragged item index.

<div id='tabparent'>
    <ejs-tab #firstTabObj id="firstTab" heightAdjustMode='Auto' [allowDragAndDrop]='true' dragArea='#tabparent'
    (onDragStart)='firstTabdragStart($event)' (dragged)='firstTabDragStop($event)'>
    <e-tabitems>
        <e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem>
        <e-tabitem [header]='headerText[1]' [content]="content1"></e-tabitem>
        <e-tabitem [header]='headerText[2]' [content]="content2"></e-tabitem>
        <e-tabitem [header]='headerText[3]' [content]="content3"></e-tabitem>
    </e-tabitems>
    </ejs-tab>
    <ejs-tab #secondTabObj id="secondTab" heightAdjustMode='Auto' [allowDragAndDrop]='true' dragArea='#tabparent'
    (onDragStart)='secondTabDragStart($event)' (dragged)='secondTabDragStop($event)'>
    <e-tabitems>
        <e-tabitem [header]='headerText[4]' [content]="content4"></e-tabitem>
        <e-tabitem [header]='headerText[5]' [content]="content5"></e-tabitem>
        <e-tabitem [header]='headerText[6]' [content]="content6"></e-tabitem>
        <e-tabitem [header]='headerText[7]' [content]="content7"></e-tabitem>
    </e-tabitems>
    </ejs-tab>
</div>
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { TabAllModule } from '@syncfusion/ej2-angular-navigations'




import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { TabComponent, DragEventArgs } from '@syncfusion/ej2-angular-navigations';
import { isNullOrUndefined } from "@syncfusion/ej2-base";

/**
 * Tab Component
 */

@Component({
imports: [
        FormsModule,
        TabAllModule,
        
    ],


standalone: true,
    selector: 'app-container',
    templateUrl: './app.component.html',
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild('firstTabObj') public firstTabObj?: TabComponent;
    @ViewChild('secondTabObj') public secondTabObj?: TabComponent;

    public headerText: Object[] = [{ 'text': 'India' }, { 'text': 'Australia' }, { 'text': 'USA' }, { 'text': 'France' }, { 'text': 'HTML' }, { 'text': 'C Sharp(C#)' }, { 'text': 'Java' }, { 'text': 'VB.Net' }];
    public firstTabitem: Object[] = [];
    public secondTabitem: Object[] = [];
    public dragItemIndex?: number;
    public dragItemContainer?: HTMLElement;

    public content0: string = 'India officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.';

    public content1: string = 'Australia, officially the Commonwealth of Australia, is a country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the world sixth-largest country by total area. Neighboring countries include Indonesia, East Timor and Papua New Guinea to the north; the Solomon Islands, Vanuatu and New Caledonia to the north-east; and New Zealand to the south-east.';

    public content2: string = 'The United States of America (USA or U.S.A.), commonly called the United States (US or U.S.) and America, is a federal republic consisting of fifty states and a federal district. The 48 contiguous states and the federal district of Washington, D.C. are in central North America between Canada and Mexico. The state of Alaska is west of Canada and east of Russia across the Bering Strait, and the state of Hawaii is in the mid-North Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean.';

    public content3: string = 'France, officially the French Republic is a sovereign state comprising territory in western Europe and several overseas regions and territories. The European part of France, called Metropolitan France, extends from the Mediterranean Sea to the English Channel and the North Sea, and from the Rhine to the Atlantic Ocean; France covers 640,679 square kilo metres and as of August 2015 has a population of 67 million, counting all the overseas departments and territories.';

    public content4: string = 'HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.';

    public content5: string = 'C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.';

    public content6: string = 'Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle Corporation, that provides a system for developing application software and deploying it in a cross-platform computing environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to provide many features of native applications and can be embedded in HTML pages.';

    public content7: string = 'The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.';

    firstTabdragStart(args: DragEventArgs): void {
        this.firstTabitem = [(this.firstTabObj as TabComponent).items[args.index]];
        args.draggedItem.style.visibility = 'hidden';
        this.dragItemContainer = <HTMLElement>args.draggedItem.closest('.e-tab');
    }

    firstTabDragStop(args: DragEventArgs): void {
        if (!isNullOrUndefined((args.target as HTMLElement).closest('.e-tab') as Element) && !(this.dragItemContainer as HTMLElement).isSameNode(args.target.closest('.e-tab'))) {
            args.cancel = true;
            let TabElement: HTMLElement = <HTMLElement>args.target.closest('.e-tab');
            let dropItem: HTMLElement = <HTMLElement>args.target.closest('.e-toolbar-item');
            if (TabElement != null && dropItem != null) {
                const childrenArray = Array.from((this.firstTabObj as TabComponent).element.children[0].children[0].children);
                const toolbarItem: Element[] = childrenArray.filter(el => el.classList.contains('e-toolbar-item'));
                this.dragItemIndex = toolbarItem.indexOf(args.draggedItem);
                let dropItemContainer: Element = args.target.closest('.e-toolbar-items') as Element;
                let dropChildArray: Element[] = (Array.from(dropItemContainer.children)).filter(el => el.classList.contains('e-toolbar-item'));
                let dropItemIndex: number = (dropItemContainer != null) ? dropChildArray.indexOf(dropItem) as number : '' as any;
                (this.secondTabObj as TabComponent).addTab(this.firstTabitem, dropItemIndex);
                (this.firstTabObj as TabComponent).removeTab(this.dragItemIndex);
            }
        }
    }

    secondTabDragStart(args: DragEventArgs): void {
        this.secondTabitem = [(this.secondTabObj as TabComponent).items[args.index]];
        args.draggedItem.style.visibility = 'hidden';
        this.dragItemContainer = <HTMLElement>args.draggedItem.closest('.e-tab');
    }

    secondTabDragStop(args: DragEventArgs): void {
        if (!isNullOrUndefined(args.target.closest('.e-tab') as Element) && !(this.dragItemContainer as HTMLElement).isSameNode(args.target.closest('.e-tab'))) {
            args.cancel = true;
            let TabElement: HTMLElement = <HTMLElement>args.target.closest('.e-tab');
            let dropItem: HTMLElement = <HTMLElement>args.target.closest('.e-toolbar-item');
            if (TabElement != null && dropItem != null) {
                const childrenArray = Array.from((this.secondTabObj as TabComponent).element.children[0].children[0].children);
                const toolbarItem: Element[] = childrenArray.filter(el => el.classList.contains('e-toolbar-item'));
                this.dragItemIndex = toolbarItem.indexOf(args.draggedItem);
                let dropItemContainer: Element = args.target.closest('.e-toolbar-items') as Element;
                let dropChildArray: Element[] = (Array.from(dropItemContainer.children)).filter(el => el.classList.contains('e-toolbar-item'));
                let dropItemIndex: number = (dropItemContainer != null) ? dropChildArray.indexOf(dropItem) as number : '' as any;
                (this.firstTabObj as TabComponent).addTab(this.secondTabitem, dropItemIndex);
                (this.secondTabObj as TabComponent).removeTab(this.dragItemIndex);
            }
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Drag and drop items to external source

It is possible to drag and drop the items to any of the external sources from the Tab, by manually saving those dropped items as new node data through the addNodes method of Treeview and removing the dragged item through the removeTab method of Tab.

In this example, we have used the tree view control as an external source, and the item from the tab component is dragged and dropped onto the child nodes of the tree view component. Therefore, it is necessary to use the dragged event of the Tab component, where we can form an event object and save it using the addNodes method of the Treeview and remove the dragged item through the removeTab method of Tab using the dragged item index.

<div id='tabparent'>
    <ejs-tab #tabObj id="draggableTab" heightAdjustMode='Auto' [allowDragAndDrop]='true' dragArea='#tabparent'
    (created)='onTabCreate()' (dragged)='tabDragStop($event)'>
    <e-tabitems>
        <e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem>
        <e-tabitem [header]='headerText[1]' [content]="content1"></e-tabitem>
        <e-tabitem [header]='headerText[2]' [content]="content2"></e-tabitem>
        <e-tabitem [header]='headerText[3]' [content]="content3"></e-tabitem>
    </e-tabitems>
    </ejs-tab>
    <ejs-treeview #treeObj id='draggableTreeview' [fields]='field' cssClass='treeview-external-drop-tab'>
    </ejs-treeview>
</div>
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { TabAllModule, TreeViewModule } from '@syncfusion/ej2-angular-navigations'




import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { TabComponent, DragEventArgs, TabItemModel, TreeViewComponent, HeaderModel } from '@syncfusion/ej2-angular-navigations';
import { isNullOrUndefined } from "@syncfusion/ej2-base";

/**
 * Tab Component
 */

@Component({
imports: [
        FormsModule,
        TabAllModule,
        
        TreeViewModule
    ],


standalone: true,
    selector: 'app-container',
    templateUrl: './app.component.html',
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild('tabObj') tabObj?: TabComponent;
    @ViewChild('treeObj') treeObj?: TreeViewComponent;

    public headerText: Object[] = [{ 'text': 'India' }, { 'text': 'Australia' }, { 'text': 'USA' }, { 'text': 'France' }];

    public content0: string = 'India officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.';

    public content1: string = 'Australia, officially the Commonwealth of Australia, is a country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the world sixth-largest country by total area. Neighboring countries include Indonesia, East Timor and Papua New Guinea to the north; the Solomon Islands, Vanuatu and New Caledonia to the north-east; and New Zealand to the south-east.';

    public content2: string = 'The United States of America (USA or U.S.A.), commonly called the United States (US or U.S.) and America, is a federal republic consisting of fifty states and a federal district. The 48 contiguous states and the federal district of Washington, D.C. are in central North America between Canada and Mexico. The state of Alaska is west of Canada and east of Russia across the Bering Strait, and the state of Hawaii is in the mid-North Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean.';

    public content3: string = 'France, officially the French Republic is a sovereign state comprising territory in western Europe and several overseas regions and territories. The European part of France, called Metropolitan France, extends from the Mediterranean Sea to the English Channel and the North Sea, and from the Rhine to the Atlantic Ocean; France covers 640,679 square kilo metres and as of August 2015 has a population of 67 million, counting all the overseas departments and territories.';

    public field: Object = {
        dataSource: [
            { text: 'Hennessey Venom', id: 'list-01' },
            { text: 'Bugatti Chiron', id: 'list-02' },
            { text: 'Bugatti Veyron Super Sport', id: 'list-03' },
            { text: 'SSC Ultimate Aero', id: 'list-04' },
            { text: 'Koenigsegg CCR', id: 'list-05' },
            { text: 'McLaren F1', id: 'list-06' },
            { text: 'Aston Martin One- 77', id: 'list-07' },
            { text: 'Jaguar XJ220', id: 'list-08' },
            { text: 'McLaren P1', id: 'list-09' },
            { text: 'Ferrari LaFerrari', id: 'list-10' },
        ],
        id: "id", text: "text"
    }

    public i: number = 0;

    onTabCreate(): void {
        let tabElement: HTMLElement = document.getElementById('draggableTab') as HTMLElement;
        if (!isNullOrUndefined(tabElement)) {
            (this.tabObj as TabComponent).element.children[0].classList.add('e-droppable');
            (this.tabObj as TabComponent).element.children[1].classList.add('tab-content');
        }
    }

    tabDragStop(args: DragEventArgs): void {
        const childrenArray = Array.from((this.tabObj as TabComponent).element.children[0].children[0].children);
        const toolbarItem: Element[] = childrenArray.filter(el => el.classList.contains('e-toolbar-item'));
        let dragTabIndex: number = toolbarItem.indexOf(args.draggedItem);
        let dragItem: TabItemModel = (this.tabObj as TabComponent).items[dragTabIndex];
        let dropNode: HTMLElement = <HTMLElement>args.target.closest('#draggableTreeview .e-list-item');
        if (dropNode != null && !args.target.closest('#draggableTab .e-toolbar-item')) {
            args.cancel = true;
            let dropContainer = Array.from((this.treeObj as TreeViewComponent).element.children[0].children);
            const treeViewItem: Element[] = dropContainer.filter(el => el.classList.contains('e-list-item'));
            let dropIndex: number = Array.prototype.indexOf.call(treeViewItem, dropNode);
            let newNode: { [key: string]: Object }[] = [{ id: 'list' + this.i, text: (dragItem.header as HeaderModel).text as any }];
            (this.tabObj as TabComponent).removeTab(dragTabIndex);
            this.treeObj?.addNodes(newNode, 'Treeview' , dropIndex);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Drag and drop items from external source

It is possible to drag and drop the items from any of the external sources into the Tab, by manually saving those dropped items as new item data through the addTab method of Tab and removing the dragged node through the removeNodes method of Treeview.

In this example, we have used the tree view control as an external source, and the child nodes from the tree view component are dragged and dropped onto the Tab. Therefore, it is necessary to use the nodeDragStop event of the Treeview component, where we can form an event object and save it using the addTab method of the Tab and remove the dragged node through the removeNodes method of Treeview.

<div id='tabparent'>
    <ejs-tab #tabObj id="draggableTab" heightAdjustMode='Auto' dragArea='#tabparent'>
        <e-tabitems>
            <e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem>
            <e-tabitem [header]='headerText[1]' [content]="content1"></e-tabitem>
            <e-tabitem [header]='headerText[2]' [content]="content2"></e-tabitem>
            <e-tabitem [header]='headerText[3]' [content]="content3"></e-tabitem>
        </e-tabitems>
    </ejs-tab>
    <ejs-treeview #treeObj id='draggableTreeview' [fields]='field' cssClass='treeview-external-drop-tab' dragArea='#container' [allowDragAndDrop]='true' (nodeDragStop)='onNodeDragStop($event)'
    (nodeDragging)='onNodeDrag($event)'>
    </ejs-treeview>
</div>
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { TabAllModule, TreeViewModule } from '@syncfusion/ej2-angular-navigations'




import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { TabComponent, TabItemModel, TreeViewComponent, DragAndDropEventArgs } from '@syncfusion/ej2-angular-navigations';
import { isNullOrUndefined } from "@syncfusion/ej2-base";

/**
 * Tab Component
 */

@Component({
imports: [
        FormsModule,
        TabAllModule,
        
        TreeViewModule
    ],


standalone: true,
    selector: 'app-container',
    templateUrl: './app.component.html',
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild('tabObj') tabObj?: TabComponent;
    @ViewChild('treeObj') treeObj?: TreeViewComponent;

    public headerText: Object[] = [{ 'text': 'India' }, { 'text': 'Australia' }, { 'text': 'USA' }, { 'text': 'France' }];

    public content0: string = 'India officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.';

    public content1: string = 'Australia, officially the Commonwealth of Australia, is a country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the world sixth-largest country by total area. Neighboring countries include Indonesia, East Timor and Papua New Guinea to the north; the Solomon Islands, Vanuatu and New Caledonia to the north-east; and New Zealand to the south-east.';

    public content2: string = 'The United States of America (USA or U.S.A.), commonly called the United States (US or U.S.) and America, is a federal republic consisting of fifty states and a federal district. The 48 contiguous states and the federal district of Washington, D.C. are in central North America between Canada and Mexico. The state of Alaska is west of Canada and east of Russia across the Bering Strait, and the state of Hawaii is in the mid-North Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean.';

    public content3: string = 'France, officially the French Republic is a sovereign state comprising territory in western Europe and several overseas regions and territories. The European part of France, called Metropolitan France, extends from the Mediterranean Sea to the English Channel and the North Sea, and from the Rhine to the Atlantic Ocean; France covers 640,679 square kilo metres and as of August 2015 has a population of 67 million, counting all the overseas departments and territories.';

    public field: Object = {
        dataSource: [
            { text: 'Hennessey Venom', id: 'list-01' },
            { text: 'Bugatti Chiron', id: 'list-02' },
            { text: 'Bugatti Veyron Super Sport', id: 'list-03' },
            { text: 'SSC Ultimate Aero', id: 'list-04' },
            { text: 'Koenigsegg CCR', id: 'list-05' },
            { text: 'McLaren F1', id: 'list-06' },
            { text: 'Aston Martin One- 77', id: 'list-07' },
            { text: 'Jaguar XJ220', id: 'list-08' },
            { text: 'McLaren P1', id: 'list-09' },
            { text: 'Ferrari LaFerrari', id: 'list-10' },
        ],
        id: "id", text: "text"
    }

    onNodeDragStop(args: DragAndDropEventArgs): void {
        let dropElement: HTMLElement = <HTMLElement>args.target.closest('#draggableTab .e-toolbar-item');
        if (dropElement != null) {
            const childrenArray = Array.from((this.tabObj as TabComponent).element.children[0].children[0].children);
            const toolbarItem: Element[] = childrenArray.filter(el => el.classList.contains('e-toolbar-item'));
            let dropItemIndex: number = toolbarItem.indexOf(dropElement as never);
            let newTabItem: TabItemModel[] = [{
                header: { 'text': args.draggedNodeData['text'].toString() },
                content: args.draggedNodeData['text'].toString() + ' Content'
            }];
            (this.tabObj as TabComponent).addTab(newTabItem, dropItemIndex);
            this.treeObj?.removeNodes([args.draggedNode]);
            args.cancel = true;
        } else {
            let dropNode: HTMLElement = <HTMLElement>args.target.closest('#draggableTreeview .e-list-item ');
            if (!isNullOrUndefined(dropNode) && args.dropIndicator === 'e-drop-in') {
                args.cancel = true;
            }
        }
    }

    onNodeDrag(args: DragAndDropEventArgs): void {
        if (!isNullOrUndefined((args.target as HTMLElement).closest('.tab-content') as Element)) {
            args.dropIndicator = 'e-no-drop';
        } else if (!isNullOrUndefined(args.target.closest('#draggableTab .e-tab-header') as Element)) {
            args.dropIndicator = 'e-drop-in';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));