如何在带有角材料8 cdk drag n drop的放置区域内创建放置区域？

Question

我正在尝试创建一个表单设计器，其中存在一系列控件（输入，文本区域等），并将它们拖到包含用于设计表单的表单控件的选项卡中。但是我需要激活该选项卡中的另一个放置区（已经是放置区）。我使用了 cdkDropListGroup ， cdkDropList 和 [cdkDropListData] 。

<div class="row" cdkDropListGroup>

   <div cdkDropList
        [cdkDropListData]="copyControlList" 
        class="control-list mat-elevation-z1"      // control list to drag
        (cdkDropListDropped)="drop($event)">
   </div>


   <div cdkDropList
        [cdkDropListData]="copyControlList" 
        class="control-list mat-elevation-z1"
        (cdkDropListDropped)="drop($event)">            // drop zone for controls

        <div cdkDropList
           [cdkDropListData]="copyControlList"      
           class="control-list mat-elevation-z1"       // another drop zone for controls
           (cdkDropListDropped)="drop($event)">
        </div>

   </div>

  /// other controls (input, textarea)


 </div>

我正在使用角材料cdk拖放