拖放单元格内容成角度的cdk

Question

我想将跨度It​​em1从第1列拖到第2列，并且我想获取该列的索引。所以我该如何在角度拖放cdk中做到这一点，有没有一种方法可以将跨度放在新职位，我尝试过更改样式，但是我认为这不是一个好主意吗？

这是我的html

<table id="#our_table" border="1">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>

  </tr>
  <tr>

    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)">
        <span cdkDrag [cdkDragData]="item" cdkDragLockAxis="x" cdkDrag (cdkDrag)="drag($event)" class="event" id="item1">Item 1</span>
      </div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>

  </tr>

</table>

这是我的打字稿

import { Component, OnInit } from '@angular/core';
import { ZoomService } from '../zoom.service';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-grille',
  templateUrl: './grille.component.html',
  styleUrls: ['./grille.component.scss']
})
export class GrilleComponent implements OnInit {



  msg: string;
  constructor(private zoomService: ZoomService) { }

  ngOnInit() {
   {




  drop(event: CdkDragDrop<string[]>) {

    event.item.element.nativeElement.style.left = "100px";
    console.log(event)
  }
  drag(event: CdkDragDrop<string[]>) {
    console.log("i am moved ")
  }
}