ng-drag-drop 从源列表中删除拖动数据

Question

对于我的 Angular 应用程序，我使用的是 ng-drag-drop 包。我有三个带有可拖动项目的列表。用户应该能够将任何项目拖到任何列表中。然后该项目将从初始列表中删除并插入到新列表中。但是，ng-drag-drop 提供的示例仅显示了两个列表的用法。使用 to 列表很容易确定项目的来源，因为只有一个选项。 例如。我必须列出 A 和 B。如果我从列表 A 中拖动一个项目，我知道我必须在列表 A 中删除它并将其添加到列表 B。 但是，如果我有三个列表 A、B 和 C。并且我将一个项目从 A 移动到 C。这个项目的来源可以是 A 或 B。因此，我不知道从哪里删除它。 这是我当前的代码： 这是我的 HTML 结构：

<div class="columnBox" droppable [dragOverClass]="'drag-target-border'"
     [dragHintClass]="'drag-hint'" (onDrop)="onListADrop($event)">
  <div class="task" *ngFor="let item of listA" draggable [dragClass]="'drag-over'" [dragData]="item">
    {{ item.name }}
  </div>
</div>

<div class="columnBox" droppable [dragOverClass]="'drag-target-border'"
     [dragHintClass]="'drag-hint'" (onDrop)="onListBDrop($event)">
  <div class="task" *ngFor="let item of listB" draggable [dragClass]="'drag-over'" [dragData]="item">
    {{ item.name }}
  </div>
</div>

<div class="columnBox" droppable [dragOverClass]="'drag-target-border'"
     [dragHintClass]="'drag-hint'" (onDrop)="onListCDrop($event)">
  <div class="task" *ngFor="let item of listC" draggable [dragClass]="'drag-over'" [dragData]="item">
    {{ item.name }}
  </div>
</div>

如您所见，我创建了三个列表 A、B、C。

现在这是我的 Typescript 代码：

listA = [
    {name: 'milk'},
    {name: 'juice'}
  ];

  listB = [
    {name: 'beer'},
    {name: 'water'}
  ];

  listC = [
    {name: 'wine'}
  ];

  onListADrop(e: DropEvent) {
    this.listA.push(e.dragData);
    this.removeItem(e.dragData, this.listB);
  }

  onListBDrop(e: DropEvent) {
    this.listB.push(e.dragData);
    this.removeItem(e.dragData, this.listA);
  }

  onListCDrop(e: DropEvent) {
    this.listC.push(e.dragData);
    this.removeItem(e.dragData, this.listA);
  }

  removeItem(item: any, list: Array<any>) {
    let index = list.map(function (e) {
      return e.title
    }).indexOf(item.title);
    list.splice(index, 1);
  }

所以对于列表 A 和 B，添加和删除工作正常。但是，如果我将一个项目从列表 C 拖到列表 A，它会在 B 列表中查找以删除该项目。如何告诉每个“removeItem”方法从数据来源列表中删除？

Answer 1

你不需要为每个 drop 事件设置一个函数，因为你可以在 cdk 文档中检查，你可以在你的 html 中做这样的事情：

<div cdkDropListGroup>
  <!-- All lists in here will be connected. -->
  <div cdkDropList id='delete'(cdkDropListDropped)="drop($event)" ></div>
  <div cdkDropList id='listX' (cdkDropListDropped)="drop($event)"<!--here you put your info and settings-->><div cdkDrag object,classes,*ngFor, etc ( >{{ name }}</div><!--repeat this for each list-->
</div>

在你的 ts 文件中，你需要一个函数来处理 drop 事件：

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

当然，您可以在所有之前添加一个额外的“如果”，询问放置容器是否是“删除”容器，所以它会是这样的：

  drop(event: CdkDragDrop<string[]>) {
    if(event.id === 'delete') {transferArrayItem(event.previousContainer.data,
                    event.container.data,
                    event.previousIndex,
                    event.currentIndex); deleteitem(event){this.deleteArray = []} else {
    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);
    }
 }}