CDK拖放嵌套列表

问题描述

我有两个对象，用户和信息。

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

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

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

示例：我打算在名称为Name1的列中放置文本为“名称2”的扩展卡。

谢谢

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" },text: "Expand22" },{ idUser: 3,text: "Expand33" },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.currentIndex
      );
    }
  }

解决方法

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

1. 从技术上讲，您只有一个数据源，因此无法正常工作，因此请转换数据结构，以使每个用户都有一个var labelArray = document.querySelectorAll("*[aria-label]"); var labelText = labelArray.length; for (var i = 0; i < labelText; i++) { console.log(labelArray[i]); } 个项目的数组。
2. 在包含所有UserInfo的容器元素上使用cdkDropListGroup

仅此而已！

cdkDropList

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

看看这本从您的stackblitz分叉过来的东西。