копировать содержимое из mat-box в mat-box-content, похожее на drag drop

Question

StackBlitz демонстрация моей проблемы Если вы не читаете полный вопрос, вот краткий вопрос, перетащите список фильмов из панели ящиков, чтобы приветствовать раздел.

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

properties-workspace. html

   <mat-drawer-container [class.drawer-opened]="drawer.opened">
     <mat-drawer #drawer class="drawer" mode="side" opened="false" position="end">
      <mat-toolbar class="header">
        <div>Logo</div>
      <mat-icon class="close" (click)="drawer.close()">close</mat-icon>
    </mat-toolbar>
     <div class="contents">
      <properties-panel-content
        [selectedIndex]="tabIndex$ | async"
      ></properties-panel-content>
     </div>
    </mat-drawer>

    <mat-toolbar class="main properties">
     <mat-icon *ngIf="!drawer.opened" (click)="drawer.toggle()">
       menu
     </mat-icon>
    </mat-toolbar>

    <div class="main contents">
       <dashboard></dashboard>
    </div>
    </mat-drawer-container>

properties-panel-content. html

<div>
<mat-tab-group [selectedIndex]="selectedIndex">
<mat-tab label="File">
  <ng-template matTabContent> <file></file> </ng-template>
</mat-tab>
<mat-tab label="Add">
  <ng-template matTabContent> <add></add> </ng-template>
</mat-tab>
<mat-tab label="Properties">
  <ng-template matTabContent> <properties></properties> </ng-template>
</mat-tab>
<mat-tab label="Layout">
  <ng-template matTabContent>
    <layout></layout>
  </ng-template>
</mat-tab>
</mat-tab-group>
</div>

file. html

<div class="container">
    <h2>Movies</h2>
    <div
      cdkDropList
      #moviesList="cdkDropList"
      [cdkDropListData]="MoviesList"
      [cdkDropListConnectedTo]="[doneMovieList]"
      class="movie-list"
      (cdkDropListDropped)="onDrop($event)"
    >
      <div
        class="movie-block"
        *ngFor="let moviesList of MoviesList"
        cdkDrag
      >
        {{ moviesList }}
      </div>
    </div>
  </div>
  <div class="container">
    <h2>Movies Watched</h2>
    <div
      cdkDropList
      #doneMovieList="cdkDropList"
      [cdkDropListData]="MoviesWatched"
      [cdkDropListConnectedTo]="[moviesList]"
      class="movie-list"
      (cdkDropListDropped)="onDrop($event)"
    >
      <div
        class="movie-block"
        *ngFor="let moviesWatched of MoviesWatched"
        cdkDrag
      >
        {{ moviesWatched }}
      </div>
    </div>
  </div>

Теперь меня интересует перетаскивание содержимого из в и перетаскиваемое содержимое все еще должен присутствовать в исходном месте?

Возможно ли это сделать? Я не могу вставить его, так как вложенные компоненты не знают о [cdkDropListConnectedTo] для удаления перетаскиваемого содержимого.

Спасибо