如何为源和接收器下拉列表使用不同的 ckdDrag占位符?

Question

我正在使用Angular Material的拖放模块来移动一些元素。

更具体地说，我有多个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(，并且仅为源列表保留占位符。

不过，我无法区分这两个地方，因为即使在"接收器"位置，它似乎也是源元素的 HTML 显示(这有点道理，因为占位符是cdkDrag的属性而不是cdkDropList(。

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

堆栈闪电战示例。

直觉：(多个(列表是一副牌，当一张牌从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属性来确定拖动是在源列表外部还是内部，以选择要在占位符中显示的内容。

这里还有一个指向StackBlitz分支的链接，您可以在其中看到它的工作。