Question

我有四个包含四个不同对象（A，B，C，D）的列表。

是否可以将名称与这些列表中的每个列表相关联？换句话说，列表A为A，B为B ...

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

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

是否有一种方法可以分配或始终从对象所在的列表和放置该对象的列表中获取相同的名称？

谢谢

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

Answer 1

由于它是元素列表，因此当拖放元素时，会将其添加到其他列表中。

实现所需目标的最简单方法是，向列表中的每个元素添加一个键：

请紧记：这不是最佳解决方案

示例：

A = [{
    name:"AA",
    belongTo: "A"
  },
  {
    name:"BB",
    belongTo: "A"
  },
  {
    name:"CC",
    belongTo: "A"
  },
  ];

  B = [{
    name:"RR",
    belongTo: "B"
  },
  {
    name:"PP",
    belongTo: "B"
  },
  {
    name:"QQ",
    belongTo: "B"
  },
  ];

HTML（列表A的div卡主体）：

   <div class="card-body" style="overflow-y: auto;"  #activeList="cdkDropList"
      style="height:100%"
      class="box-list"
      cdkDropList
      cdkDropListOrientation="vertical"
      [cdkDropListData]="A"
      [cdkDropListConnectedTo]="[inactiveList]"
      (cdkDropListDropped)="drop($event)">
        <div *ngFor="let nw of A" cdkDrag >
          <div class="card mysmallCcards">             
            <div class="card-body">
                <span>{{nw.name}} => {{nw.belongTo}}</span>         
            </div>
          </div>
        </div>
      </div>

Answer 2

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

对于先前的容器：

event.previousContainer.element.nativeElement.id

对于您当前的容器：

event.container.element.nativeElement.id

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

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

在多个列表之间拖放

2 个答案: