在Angular 12中，要实现使用占位列表的替换列表的拖放效果，可以使用Angular CDK（Component Dev Kit）中提供的DragDrop模块。

以下是一个使用replace-list实现拖放效果的示例代码：

在app.component.html中添加以下代码：

  

    {{item.name}}
  



  

    Placeholder
  

在app.component.ts中添加以下代码：

import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  list = [
    {name: 'Item 1'},
    {name: 'Item 2'},
    {name: 'Item 3'},
  ];

  placeholder = true;

  drop(event: CdkDragDrop) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      event.container.data.splice(event.currentIndex, 0, event.previousContainer.data[event.previousIndex]);
      event.previousContainer.data.splice(event.previousIndex, 1);
    }
  }
}

在以上代码中，使用了两个cdkDropList元素来分别代表列表和占位列表。在拖拽过程中，选择放置的位置时，会出现