以下是一个使用Angular Material拖放的解决方法，其中一个元素被拖动并放下后会被转换为另一个元素。

首先，需要在项目中安装Angular Material和Cdk拖放模块：

npm install @angular/material @angular/cdk

在app.module.ts文件中导入所需的模块：

import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    DragDropModule,
    MatButtonModule,
    MatIconModule
  ],
  ...
})
export class AppModule { }

在组件的HTML中，定义两个元素，一个是拖动元素，另一个是目标元素：

  

    Drag me
  
  

    Drop here
  

在组件的CSS中，定义元素的样式：

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

在组件的.ts文件中，实现拖放的逻辑：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  onDragEnd(event: CdkDragEnd) {
    // 获取拖动元素的索引
    const currentIndex = event.source._dragRef['_lastDropContainer'].id;
    // 获取目标元素的索引
    const targetIndex = event.source._dragRef['_dropContainer'].id;

    // 如果拖动元素和目标元素不是同一个，执行转换操作
    if (currentIndex !== targetIndex) {
      moveItemInArray(this.items, currentIndex, targetIndex);
    }
  }

  onDrop(event: CdkDragDrop) {
    // 如果拖动元素和目标元素不是同一个，执行转换操作
    if (event.previousContainer !== event.container) {
      moveItemInArray(this.items, event.previousIndex, event.currentIndex);
    }
  }

  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
}

在上述代码中，我们通过cdkDrag指令将一个元素标记为可拖动，并使用(cdkDragEnded)事件监听拖动结束的事件。在(cdkDragEnded)事件处理程序中，我们获取了拖动元素和目标元素的索引，并根据条件执行元素的转换操作。

对于目标元素，我们使用cdkDropList指令将其标记为可放置的位置，并使用(cdkDropListDropped)事件监听拖放完成的事件。在(cdkDropListDropped)事件处理程序中，我们使用moveItemInArray函数将拖动元素转换为目标元素。

希望这个示例能帮助你实现Angular Material拖放并转换元素的功能。