2

一段时间以来，我一直在为这个问题绞尽脑汁。我想要实现的是有两个连接的具有恒定长度的拖放列表。这意味着如果我将一个元素从一个列表移动到另一个列表，一个项目就会被推送到另一个列表。这在活动期间当然是微不足道的cdkDropListDropped，但我希望它在项目被拖到列表上时立即发生。

我的大多数尝试都涉及使用该cdkDropListEntered事件来：

  1. 尝试简单地移动数据数组中的项目：
public enter(list: number, event: CdkDragEnter<User[]>) {
  if (list === 0) {
    let data = this.schedule.responsible.pop();
    this.schedule.queue.unshift(data);
  } else {
    let data = this.schedule.queue.shift();
    this.schedule.responsible.push(data);
  }
}

这导致了以下类型的错误：

core.js：6185 错误 DOMException：无法在“节点”上执行“插入前”：要插入新节点的节点不是该节点的子节点

  1. 尝试使用CdkDropList addItem(), removeItem(), getSortedItems(). 这会导致类似的问题。

  2. 尝试使用 Renderer2 移动 DOM 元素本身（并且保持数据不变）

有什么方法可以实现我想要的吗？

这幅宏伟的绘画有助于解释我想要实现的目标。

4

1 回答 1

1

好的，在尝试了两种解决方案后，我已经弄清楚了。第一个涉及将占位符框添加到两个列表中，只有在它们有内容时才可见。它们的内容将是推入该列表的框的内容。同时，原盒被赋予了display: none风格。这主要实现了我想要的行为，但由于可拖动的内部模型和 DOM 之间的不匹配，存在一些视觉问题。

最终最终奏效的是放弃首先拥有两个列表的概念。然后排序自然而然地解决了。但是，样式必须稍有不同，因为每个可拖动对象都必须是列表的直接后代。

附上代码和一个有效的 Stackblitz 示例：

app.component.ts

import { Component, OnInit} from '@angular/core';
import {CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

    public lists: {list1: string[], list2: string[]};
    public fullList: string[];
    public numList1: number;

    constructor() {}

    ngOnInit() {
        this.lists = {
            list1: ['one', 'two'],
            list2: ['three', 'four']
        };
        this.fullList = this.lists.list1.concat(this.lists.list2);
        this.numList1 = this.lists.list1.length;
    }

    public drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    }
}

app.component.html

<div class="list-container">
  <div cdkDropList
      [cdkDropListAutoScrollDisabled]="true"
      [cdkDropListData]="fullList"
      cdkDropListLockAxis="y"
      (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let item of fullList; let index = index;">
      <h2 *ngIf="index === 0">List 1</h2>
      <h2 *ngIf="index === numList1">List 2</h2>
      <div cdkDrag class="drop-box">{{item}}</div>
    </ng-container>
  </div>
</div>

Stackblitz：https ://stackblitz.com/edit/angular-ivy-s7zfye

于 2020-06-11T06:31:49.317 回答