Question

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

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

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

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

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

谢谢

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

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

从技术上讲，您只有一个数据源，因此无法正常工作，因此请转换数据结构，以使每个用户都有一个var labelArray = document.querySelectorAll("*[aria-label]"); var labelText = labelArray.length; for (var i = 0; i < labelText; i++) { console.log(labelArray[i]); }个项目的数组。
在包含所有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.previousIndex,
        event.currentIndex
      );
    }
  }
}

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

CDK拖放嵌套列表

1 个答案: