在多个列表之间拖放

Question

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

有没有办法将名称与这些列表中的每一个相关联？换句话说，列表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" ...>

在多个列表之间拖放

Drag and drop between several lists

drag-and-drop

typescript

angular-material

angular

angular-cdk