如何为源和接收器下拉列表设置不同的 ckdDragPlaceholders？

Question

我正在使用 Angular material 的 Drag and Drop 模块来移动一些元素。

更具体地说，我有多个 cdkDropList，每个 cdkDrag：

<div *ngFor="let l of lists">
  <div cdkDropList [cdkDropListConnectedTo]="all_lists">
    <div cdkDrag>
      content
    </div>
  </div>
</div>

每当我从列表中移动一个元素时，我都希望有一个占位符，例如：

 <div cdkDrag>
      content
      <div *cdkDragPlaceholder>
          placeholder content
      </div>
 </div>

但是，当我这样做时，占位符内容既显示在缺失的（当前正在拖动的）元素（源列表）的位置，也显示在其新位置（接收器列表）的位置。我希望能够为接收器列表保留默认行为（显示根元素又名 content），并只为源列表保留占位符。

虽然我无法区分这两个地方，因为它似乎甚至在 "sink" 位置，它是源元素的 HTML 正在显示（这有点有意义，作为占位符是 cdkDrag 而不是 cdkDropList 的属性）。

如何使用不同的占位符代替元素的原始位置和新位置？

Stackblitz example.

直觉：（多个）列表是一副牌，将一张牌从 A 移动到 B 时，我在 A 牌组中看到倒数第二张（自定义占位符）牌，但是当我将鼠标悬停在顶部时-A 卡在 B 上，我看到了上面的 A 卡。

Answer 1

如果我对你的问题的理解正确，你只想在拖动到另一个列表时显示自定义占位符，而在同一列表内拖动时显示默认占位符。

要检测源列表外的移动，您可以使用 cdkDragEntered 事件，该事件会在任何时候将项目从外部拖入列表时触发。在 CdkDragEnter 事件数据中，您拥有输入的列表信息以及有关被拖动项目的所有信息。该项目包含其当前所属列表的信息。这意味着当我们输入的列表与项目列表不相同时，已经输入了另一个列表。获得此信息后，您就可以根据此信息更改占位符内显示的内容。

我已将您的 StackBlitz 示例更改为这种方法。

组件代码：

export class CdkDragDropConnectedSortingGroupExample {
  todo = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  done = [
    'Get up',
    'Brush teeth',
    'Take a shower',
  ];

  another = [
    'Check e-mail',
    'Walk dog'
  ]

  lists = [this.todo, this.done, this.another];

  public draggingOutsideSourceList: boolean = false;

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
    this.draggingOutsideSourceList = false; // always reset after drag drop finishes
  }

  onCdkDragEntered(event: CdkDragEnter<string>) {
    this.draggingOutsideSourceList = event.container !== event.item.dropContainer;
  }
}

模板：

<div cdkDropListGroup>
    <div class="example-container todoList" *ngFor="let list of lists">
        <div cdkDropList [cdkDropListData]="list" class="example-list" (cdkDropListDropped)="drop($event)">

            <div cdkDrag *ngFor="let item of list" (cdkDragEntered)="onCdkDragEntered($event)">
                <ng-template #itemTpl>
                    <div class="example-box">{{item}}</div>
                </ng-template>
                <div *cdkDragPlaceholder>
                    <div *ngIf="draggingOutsideSourceList; else itemTpl" class="customPlaceHolder">
                        Custom placeholder content only in sink list
                    </div>
                </div>
                <ng-container *ngTemplateOutlet="itemTpl"></ng-container>
            </div>
        </div>
    </div>
</div>

如您所见，我创建了三个列表，使用 cdkDragEntered 事件通过设置 draggingOutsideSourceList 属性来确定拖动是在源列表的外部还是内部用于选择要在占位符中显示的内容的模板。

这里还有一个 link to a fork of your StackBlitz 你可以看到它的工作原理。

如何为源和接收器下拉列表设置不同的 ckdDragPlaceholders？

How to have different ckdDragPlaceholders for the source and sink droplists?

angular

angular-material

drag-and-drop

angular-material2