我能阻止cdkDropList在Angular12中扩展吗？

Question

我使用角度12拖放一个垫子列表项目到另一个组件中的“下拉区域”(cdkDropList)。

当我将项目拖到液滴上方时，液滴就会膨胀，就好像要为该项目腾出空间一样。因为这不是真正的列表，所以这种行为是不可取的。我怎样才能阻止它的扩张？

​

        <mat-list-item
          cdkDrag
          [cdkDragDisabled]="!isDraggable"
          [cdkDragData]="r.id"
          (click)="selectRecord(r, i)"
          *ngFor="
            let r of recordList | filterList: searchText:filterField;
            let i = index">
          <p id="{{ 'Item-' + r.id }}" [innerHTML]="lineTitle(r)"
             matLine></p>
        </mat-list-item>

            <div
              (cdkDropListDropped)="svc.dropSub1($event)"
              *ngIf="!svc.sub1"
              cdkDropList
              class="drag-here-column text-center"
              style="border: 1px grey dotted; line-height: 300px; font-size: smaller; font-style: italic;">
              Drag preferred subject here
            </div>

Answer 1

我试着使用dragula，但是虽然更容易配置，但最终我还是遇到了同样的问题，在目的地满的时候dragula只会添加更多的元素，而改变这种行为对我来说并不明显。

在许多地方搜索了如何避免cdkDropList自动扩展或增长之后，我最终采用了自定义的拖放方法，特别是因为我需要有占位符作为对象的目的地。

对于将被拖动的每个元素设置HTML非常有用，这样您就可以根据这些id识别源和目的地(例如，将容器的前缀与位置('contA_1'，'contB_9')连接起来。

下面是一个基本的示例，一旦您了解了这个示例，就可以帮助您设置拖放事件处理程序，以及如何更新模型以反映拖放操作。

https://idkblogs.com/angular2/2/Implement-Drag-and-Drop-in-Angular-2-4-5-6