我可以阻止 cdkDropList 在 Angular12 中扩展吗答案

【问题标题】：Can I stop the cdkDropList from expanding in Angular12我可以阻止 cdkDropList 在 Angular12 中扩展吗
【发布时间】：2021-06-13 13:00:20
【问题描述】：

我正在使用 Angular 12 拖放将 mat-list-item 移动到另一个组件中的“dropzone”(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>

【问题讨论】：

标签： drag-and-drop angular-cdk angular-cdk-drag-drop

【解决方案1】：

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

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

为每个要拖动的元素设置 HTML ID 非常有用，通过这种方式，您可以根据这些 id 识别起点和终点（例如将容器的前缀与位置 ('contA_1', 'contB_9')

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

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

【讨论】：