Проблема углового перетаскивания и копирования CDK - PullRequest
Новая
       29

Проблема углового перетаскивания и копирования CDK

0 голосов
/ 07 июля 2019

У меня есть два списка, S (наш), D (восторга). Когда перетаскиваемый предмет из S входит в D, предмет сразу исчезает из S и появляется в D.

S 

<mat-list id="s" cdkDropListConnectedTo="d" cdkDropList>
  <mat-list-item cdkDrag [cdkDragData]='data' *ngFor="let data of sElements">
   {{data}}
  </mat-list-item>
</mat-list>

...

D 

<mat-list id="d" cdkDropListConnectedTo="s" cdkDropList (cdkDropListDropped)="drop($event)">
  <mat-list-item *ngFor="let data of dElements">
   {{data}}
  </mat-list-item>
</mat-list>

https://stackblitz.com/edit/angular-jtlwmk

Я хочу предотвратить исчезновение элемента в списке S, но сделать его одновременно видимым в списках S и D.

ps .: функция drop ($ event) может обрабатывать поведение копирования после удаления элемента, поэтому оно доступно в обоих списках. Проблема в том, что элемент исчезает между событиями cdkDropListEntered и cdkDropListDropped

ps2 .: Поскольку я не мог найти какие-либо решения, я попробовал обходной путь: 1. в обработчике событий cdkDropListEntered я продублировал элемент в S 2. в обработчике событий cdkDropListExited от D я удалил дублированный элемент из S

Это решение работает на 99% правильно, но когда клиент быстро тянет мышь, CDK выдает исключение.

В stackblitz это терпит неудачу 100%: https://stackblitz.com/edit/angular-xpmxlx

...