拖放角子组件

Question

我有2个子组件，它们在我的父组件中显示为选项卡。我希望能够像浏览器标签一样拖放标签。我该怎么做？

我在我的项目中使用primeNG UI库。 （https://www.primefaces.org/primeng/#/dragdrop）。我尝试了他们的“拖放”功能，并发现它适用于普通的DOM元素，但不适用于子组件标签。

下面是我的父组件html文件。我想将子组件显示为选项卡。

<p-tabView id="dashboard-tab-view" class="dashboardViewClass" *ngIf="openTabs && openTabs.length>0" (onChange)="tabChanged($event)" [controlClose]="true" (onClose)="close($event)" (contextmenu)="onRightClick($event)">
    <p-tabPanel *ngFor="let tab of openTabs ; let i = index" [header]="tab.isDirty?'*'+tab.title:tab.title" [closable]="true" [selected]="i==activeTabIndex">
        <div [ngSwitch]="tab.type" class="regularTabView">
            <child1 #child1 *ngSwitchCase="'child1'" [tab]="tab" [id]="tab.id" [projectId]="project.id"></child1>
            <child2 #child2 *ngSwitchCase="'child2'" [tab]="tab" [id]="tab.id" [projectId]="project.id" [data]="tab.additionalData"></child2>
        </div>
    </p-tabPanel>
</p-tabView>

这可能吗？