时间戳

首页 > 解决方案 > 在多个列表之间拖放

angular - 在多个列表之间拖放

问题描述

我有四个不同对象（A、B、C、D）的 4 个列表。

有没有办法将名称与这些列表中的每一个相关联？换句话说，列表 A 是 A，B 是 B ...

我打算拖放一个对象，同时知道它来自哪个列表以及它去了哪里。

我用它来找出自动生成的列表值console.log ("FROM" + event.previousContainer.id) console.log ("TO" + event.container.id)，问题是这些值有时会有所不同，它们并不总是相同的，如果你使用条件它可能会停止工作。

有没有办法从它是对象的列表和它被丢弃的列表中分配或总是获得相同的名称？

谢谢

演示 - Stackblitz

.ts

  drop(event: CdkDragDrop<string[]>) {
    console.log("FROM" + event.previousContainer.id)
    console.log("TO" + event.container.id)
    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
      );
    }
  }

标签： angulartypescriptdrag-and-dropangular-materialangular-cdk

解决方案

在您的drop函数内部调用此事件数据：

对于上一个容器：

event.previousContainer.element.nativeElement.id

对于您当前的容器：

event.container.element.nativeElement.id

然后在您的 HTML 中向列表元素添加一个 ID，如下所示：

<div ... #activeList="cdkDropList" id="list-A" ...>

推荐阅读