ng-drag-drop удалить данные перетаскивания из списка источников - PullRequest
Новая
       10

ng-drag-drop удалить данные перетаскивания из списка источников

0 голосов
/ 14 мая 2018

для моего приложения Angular Я использую пакет ng-drag-drop . У меня есть три списка с перетаскиваемыми элементами. Пользователь должен иметь возможность перетаскивать любой элемент в любой список. Затем элемент будет удален из первоначального списка и вставлен в новый список. Однако пример, предоставленный ng-drag-drop, показывает только использование с двумя списками. С помощью списков легко определить, откуда поступает элемент, поскольку существует только одна опция. Например. У меня есть списки 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" удалить из списка источника данных?

1 Ответ

0 голосов
/ 24 мая 2019

Вам не нужно иметь функцию для каждого события удаления, так как вы можете проверить в документах 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(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);
    }
 }}
...