Question

我已经在这个问题上困扰了很长时间了。我要实现的是拥有两个连接的具有恒定长度的拖放列表。这意味着，如果我将一个元素从一个列表移动到另一个列表，则项目将被推到另一个列表。这在cdkDropListDropped事件中当然是微不足道的，但是我希望在将项目拖到列表中后立即进行。

我的大多数尝试都涉及到使用cdkDropListEntered事件来进行以下操作：

尝试简单地在数据数组中移动项目：

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：无法在“节点”上执行“ insertBefore”：要在其之前插入新节点的节点不是该节点的子节点

尝试使用CdkDropList addItem()，removeItem()，getSortedItems()。这会导致类似的问题。
试图使用Renderer2移动DOM元素本身（并保持数据不变）

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

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

Answer 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

Angular Cdk拖放，等长列表

1 个答案: