我使用了棱角材料：https://material.angular.io/cdk/drag-drop/overview 创建类似的东西。

我使用了以下示例：https://material.angular.io/cdk/drag-drop/overview#controlling-which-items-can-be-moved-into-a-container 弄清楚如何限制容器中可能存在的项目数量：

// drop-example.component.html
<div class="drop-area" cdkDropList
  #dropArea="cdkDropList"
  [cdkDropListData]="myEmptyArrayVariable"
  [cdkDropListConnectedTo]="[optionsList]"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListEnterPredicate]="limiterPredicate">

// drop-example.component.ts
import { CdkDragDrop,moveItemInArray,transferArrayItem,CdkDrag,CdkDropList } from '@angular/cdk/drag-drop';

...
// see section in the drag-drop docs for example drop($event) {} function
...

limiterPredicate(item: CdkDrag,container: CdkDropList) {
  if (container.data.length === 0) {
    return true;
  } else {
    return false;
  }
}

如果您无法解决其余的问题，那么我可以尝试为您创建一个堆叠闪电战，让我知道！