如何为源和接收器droplists提供不同的ckdDragPlaceholders？

为了为源和接收器droplists提供不同的ckdDragPlaceholders，您可以使用Angular CDK（Component Dev Kit）中的Drag and Drop模块来实现。

首先，您需要在Angular项目中导入Drag and Drop模块。在您的模块文件中，添加以下导入语句：

import { DragDropModule } from '@angular/cdk/drag-drop';

然后，在您的组件模板中，您可以使用cdkDrag指令将元素标记为可拖动的源，并使用cdkDropList指令将元素标记为可接收拖动的接收器。例如：

<div cdkDropList (cdkDropListDropped)="onDrop($event)">
  <div cdkDrag *ngFor="let item of sourceItems" [cdkDragData]="item">
    {{ item.name }}
  </div>
</div>

在上面的示例中，cdkDropList指令用于创建一个接收器droplist，并使用(cdkDropListDropped)事件处理程序来处理拖放操作完成后的逻辑。cdkDrag指令用于标记可拖动的源元素，并使用[cdkDragData]属性将数据绑定到拖动项。

接下来，您可以使用cdkDragPlaceholder指令为源和接收器droplists提供不同的占位符。在源元素上使用cdkDragPlaceholder指令，并为其指定一个模板引用变量。在接收器droplist上使用cdkDropListConnectedTo属性将其连接到源元素。例如：

<div cdkDropList [cdkDropListConnectedTo]="[sourceList]" (cdkDropListDropped)="onDrop($event)">
  <div cdkDrag *ngFor="let item of sourceItems" [cdkDragData]="item" [cdkDragPlaceholder]="placeholder">
    {{ item.name }}
  </div>
</div>

<ng-template #placeholder>
  <div class="placeholder">拖放到这里</div>
</ng-template>

在上面的示例中，我们为源元素指定了一个占位符模板，并使用[cdkDragPlaceholder]属性将其绑定到源元素。占位符模板可以是任何HTML元素或组件。

最后，您可以在组件类中实现onDrop方法来处理拖放操作完成后的逻辑。您可以访问拖动项的数据以及源和目标droplist的相关信息。例如：

onDrop(event: CdkDragDrop<any>) {
  if (event.previousContainer === event.container) {
    // 在同一个droplist内部移动
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    // 跨droplist移动
    transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
  }
}

在上面的示例中，我们使用event.previousContainer和event.container来访问源和目标droplist的数据。根据需要，您可以执行不同的操作，例如在同一个droplist内部移动项或在不同的droplist之间传输项。

这是一个基本的示例，演示了如何为源和接收器droplists提供不同的ckdDragPlaceholders。根据您的具体需求，您可以根据CDK的文档和示例进一步定制和扩展功能。

腾讯云相关产品和产品介绍链接地址：