Javascript 如何在material UI中将TableItem从一个组件拖放到另一个组件？

问题是我必须将ListItem从一个列表组件拖到另一个列表组件。我不知道如何在Material UI中实现它。

模块为您提供了一种以声明方式轻松创建拖放界面的方法，支持自由拖动、在列表中排序、在列表之间传输项目、动画、触摸设备、自定义拖动手柄、预览和占位符，除了水平列表和沿轴锁定之外

下面是一个带有两个列表组件的非常简单的示例。我建议你在这里玩一玩

HTML

做
{{item}}
多恩
{{item}}

TS

todo=[
“开始工作”，
“拿食品杂货”，
“回家”，
“入睡”
];
完成=[
“起来”，
“刷牙”，
“洗个澡”，
“检查电子邮件”，
“走狗”
];
drop（事件：CdkDragDrop）{
if（event.previousContainer==event.container）{
moveItemInArray（event.container.data、event.previousIndex、event.currentIndex）；
}否则{
transferArrayItem（event.previousContainer.data，
event.container.data，
event.previousIndex，
事件（当前索引）；
}
}

堆栈溢出不是代码写入服务。请告诉我们您尝试了什么，并询问具体问题。

<div class="example-container">
  <h2>To do</h2>

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>

<div class="example-container">
  <h2>Done</h2>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

todo = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  done = [
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ];

  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);
    }
  }