角拖放CDK不具有使一个容器只能拖动而其他容器可拖放的功能

Question

我正在使用Angular材质拖放cdk进行拖放布局，我有两个div，一个包含要拖动的项目 ONLY ，这意味着我们无法在该div内进行拖放或做任何事情除了拖动，在其他div中，我们将项目从前一个div放到了它中。

角度cdk的功能似乎是有限的，我们不能简单地从一个组件中拖动，而不必在该特定div中具有drop指令并在下一个div中进行拖放。

我想要这样的东西，但是当放到可放容器中时，我们无法从前一个容器中获取拖动事件。

            <div id='main'>
              <div [style.background]="'blue'" id='components'>
                <mat-card>
                    <mat-card-title>Components</mat-card-title>
                    <mat-card-content >

                    <div id="controls" cdkDragList  >
                        <button mat-raised-button  id="Text">
                            <mat-icon>text_format</mat-icon>Text
                        </button>
                        <button mat-raised-button  id="TextArea" >
                            <mat-icon>format_align_justify</mat-icon>TextArea
                        </button>
                    </div>
                    </mat-card-content>
                </mat-card>

              </div>
              <div [style.background]="'white'" id='preview' cdkDropList (drop) ="dropped($event)">

              </div>
              <div [style.background]="'red'" id='properties'>
              </div>
            </div>