Question

我的Angular App我正在使用ng-drag-drop包。我有三个带有可拖动项目的列表。用户应该能够将任何项目拖动到任何列表。然后该项目将从初始列表中删除并插入新列表中。但是，ng-drag-drop提供的示例仅显示两个列表的用法。使用列表可以很容易地确定项目的来源，因为只有一个选项。例如。我必须列出A＆amp; B.如果我从列表A中拖动一个项目，我知道我必须在列表A中将其删除并将其添加到列表B. 但是，如果我有三个名单A，B＆amp; 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列表中查找以删除该项目。我怎么能告诉每个＆＃34; removeItem＆＃34;从数据来源列表中删除的方法？

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

当然，您可以在所有内容之前添加一个额外的“ if”，询问放置容器是否为“删除”容器，因此将是这样的：

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

ng-drag-drop删除源列表

1 个答案: