Как реализовать перетаскивание между 3 компонентами (1 родительский и 2 дочерних компонента)

Question

Я реализую функцию перетаскивания с угловым перетаскиванием.

но как реализовать это между 3 компонентами.

Я создал родительский компонент так же, как это:

<div class="zone-vehicle-overview">
      <app-vehicle-overview [vehicleOverviewData]="vehicleOverviewData" [allDropLists]="allDropLists"
        (cdkDropListDropped)="drop($event)"></app-vehicle-overview>
    </div>
    <div class="zone-company-overview">
      <app-company-overview [companyOverviewData]="companyOverviewData" [allDropLists]="allDropLists"
        (cdkDropListDropped)="drop($event)"></app-company-overview>
    </div>

этот компонент имеет 2 дочерних компонента

Компонент обзора автомобиля:

<div cdkDropList id="vehicleOverview" [cdkDropListData]="vehicleOverviewData" class="vehicle-overview"
  [cdkDropListConnectedTo]="allDropLists" (cdkDropListDropped)="drop($event)">
  <div cdkDrag>
    <div *ngFor="let item of vehicleOverviewData">{{item}}</div>
  </div>
</div>

и его файл ts:

export class VehicleOverviewComponent implements OnInit {
  @Input() vehicleOverviewData;
  @Input() allDropLists;
  @Input() cdkDropListDropped;
  constructor() { }

  ngOnInit() {
  }

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

}

и другой дочерний компонент такой же, как этот компонент.

теперь я хочу перетащить список из одного дочернего компонента в другой.

но это не работает ...

какие-нибудь идеары?

С уважением,

Leo