CDK 拖放嵌套列表

Question

我有两个对象，Users 和 Info。

我打算在不同的列中显示用户（使他们个性化），并且在每个用户中我打算将相应的信息放在用户 ID 与信息对象中的 IDUser 相同的位置。基本上，我打算分别在每个用户的列表中呈现 Obejto Info 信息。

目前我有两个列表（用户和信息），我想在垂直和水平放置它们之间拖放，但没有成功。

有人可以帮我解决这个问题，以便将卡片从一列传递到另一列（从用户到用户）。

示例：在名为 Name1 的列中，我打算将带有文本 Expand 的卡片放在名为 Name2 的列中。

谢谢

DEMO

html

<div style="width:100%; height:100%; display:flex; justify-content:center">
<div *ngFor="let usr of Users" style="width: 20%;">
  <div class="card">
    <div class="card-header" style="display: flex; align-items: center; justify-content: center;">
      <span>{{usr.name}}</span>
    </div>
    <div class="card-body" style="height:100%" cdkDropList
      cdkDropListOrientation="vertical" [cdkDropListData]="Info"
      (cdkDropListDropped)="drop($event)">    
      <div *ngFor="let item of Info">
        <div *ngIf="usr.id == item.idUser" cdkDrag>
          <div class="card">
            <div class="card-header" style="padding: 0px;">
             <span>{{item.text}}</span>
            </div>
            <div class="card-body" style="padding: 0px;position: relative;">
          <span>{{item.text}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

.ts

  Users = [
    { id: 1, name: "Name1" },
    { id: 2, name: "Name2" },
    { id: 3, name: "Name3" }
  ];

  Info = [
    { idUser: 1, text: "Expand1" },
    { idUser: 1, text: "Expand11" },
    { idUser: 2, text: "Expand2" },
    { idUser: 2, text: "Expand22" },
    { idUser: 3, text: "Expand33" },
    { idUser: 3, text: "Expand33" }
  ];

  drop(event: CdkDragDrop<string[]>) {
    console.log("TO", event.previousContainer.data[event.previousIndex]);
    console.log("FROM", event.previousContainer.data[event.currentIndex]);
    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

您可以对解决此问题的方法进行多项更改：

1. 从技术上讲，您只有一个用于数据的数据源，这将无法正常工作，因此请转换您的数据结构，以便每个用户都有一个指向 UserInfo 项目的数组。
2. 在包含所有cdkDropList 的容器元素上使用cdkDropListGroup

仅此而已！

import {
  Component
} from "@angular/core";
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem
} from "@angular/cdk/drag-drop";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  Users = [{
      id: 1,
      name: "Name1",
      items: [{
        idUser: 1,
        text: "Expand1"
      }, {
        idUser: 1,
        text: "Expand11"
      }]
    },
    {
      id: 2,
      name: "Name2",
      items: [{
        idUser: 2,
        text: "Expand2"
      }, {
        idUser: 2,
        text: "Expand22"
      }]
    },
    {
      id: 3,
      name: "Name3",
      items: [{
        idUser: 3,
        text: "Expand33"
      }, {
        idUser: 3,
        text: "Expand33"
      }]
    }
  ];

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

<div style="width:100%; height:100%; display:flex; justify-content:center" cdkDropListGroup>
  <div *ngFor="let usr of Users" style="width: 20%;">
    <div class="card">
      <div class="card-header" style="display: flex; align-items: center; justify-content: center;">
        <span>{{usr.name}}</span>
      </div>
      <div class="card-body" style="height:100%" cdkDropList id="{{usr.id}}" cdkDropListOrientation="vertical" [cdkDropListData]="usr.items" (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of usr.items">
          <div cdkDrag>
            <div class="card">
              <div class="card-header" style="padding: 0px;">
                <span>{{item.text}}</span>
              </div>
              <div class="card-body" style="padding: 0px;position: relative;">
                <span>{{item.text}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

看看这个stackblitz 是从你那里分叉出来的。