角度拖放：限制将项目拖放到框外

Question

我有一个问题： 除了能够将文本“项目”拖放到框内之外，我们还可以将其放到框外（框的右侧）。

我该如何解决？

minimal working stackblitz。

<div class="row">
<div class="column left">
    <div id="div1" cdkDrag cdkDropList cdkDropListConnectedTo="drop-list" *ngFor="let type of types"
        [cdkDragData]="type" (cdkDragMoved)="moved($event)">
        {{type.text}}
        <div *cdkDragPlaceholder class="field-placeholder"></div>

    </div>
</div>
<div class="column right">
    <h2 style="text-align: center">Box2</h2>
    <div #dropZone class="dropZone" cdkDropList id="drop-list" (cdkDropListDropped)="itemDropped($event)"
        >
        <div *ngFor="let field of fields;" cdkDrag
      style="position:absolute;z-index:10" [style.top]="field.top" [style.left]="field.left">
                {{field.text}}
        </div>
    </div>

</div>