Угловой материал Драп Падение между мат-вкладкой

Question

Есть любой способ вставить div в язычок матового материала

У меня есть 4 вкладки, использующих матовый язычок углового материала.Каждая вкладка содержит список объектов.Как переместить элемент с первой на вторую вкладку, используя перетаскивание углового материала

родительский компонент:

<div class="col-xs-12 no-padding ">
  <div class="content-container" cdkDropListGroup>
    <mat-tab-group (selectedTabChange)="tabChanged($event)">
      <mat-tab>
        <ng-template mat-tab-label>View all</ng-template>
        <div class="clear-20"></div>
        <app-contact-list *ngIf="viewAllFirst" [modeView]="modeView" [listContactPersonnel]="listContactViewAll"
          [isAddNewContact]="mode.indexOf('add') > -1" [isDeleteContact]="mode.indexOf('delete') > -1"
          [isEditContact]="mode.indexOf('edit') > -1" [listContactPersonnelTypeMaster]="listContactPersonnelTypeMaster"
          [tabView]="'ViewAll'" (btnAddNewContact)="onAddNewContact()" (btnClickEditItem)="onClickEditItem($event)"
          (btnClickDeleteItem)="onClickDeleteItem($event)"></app-contact-list>
      </mat-tab>
      <mat-tab *ngFor="let tab of listContactPersonnelTypeMaster" label="{{ tab.ContactPersonnelName }}"
        aria-label="{{ tab.ContactPersonnelCode }}">
      </mat-tab>
    </mat-tab-group>
    <div class="clear-20"></div>
    <div #container></div>
  </div>
</div>

дочерний компонент:

<div cdkDropList class="col-xs-6" [cdkDropListData]="evenListContactPersonel" (cdkDropListDropped)="drop($event)">
    <div class="item" *ngFor="let contact of evenListContactPersonel" [hidden]="!listContactPersonnel" cdkDrag
      [cdkDragDisabled]="tabView === 'ViewAll' ? true : false">
      <div class="item-content-placeholder" *cdkDragPlaceholder></div>
      <div class="item-content">
        <h4 class="name">{{ displayContactName(contact) }}</h4>
        <p class="position">{{ contact?.Designation }}</p>
        <p class="email">{{ contact?.Email }}</p>
        <p class="telno">{{ displayPhoneNumber(contact) }}</p>
        <p class="position2">{{ displayContactType(contact) }}</p>
        <div class="item-bar">
          <a class="item-delete mr-5 " (click)="onClickDeleteItem(contact)" *ngIf="modeView == 'edit'">
            <i class="fa fa-trash-o fa-1x5 mat-icon"></i>
          </a>
          <a class="item-edit" (click)="onClickEditItem(contact)" *ngIf="modeView == 'edit'">
            <i class="fa fa-pencil fa-1x5 mat-icon"></i>
          </a>
        </div>
      </div>
    </div>
  </div>