angular-materialangular-dragdrop

Drag and Drop: by using copyArrayItem() the dragged item should not be removed from start array while drop Angular 8


I have a list of items from where I drag an item and drop it into another list. I'm using copyArrayItem() method from Angular to not remove the item from the previous array.

I start dragging, the item is within the previous array: the placeholder from that item shows up.

Start dragging, placeholder shows up

enter image description here

I'm leaving the previous array: the placeholder/dragged item disappears (I want that the placeholder/dragged item stays) -> the start array has minus 1 items.

Placeholder disappears, what I don't want

enter image description here I'm on the target array: a placeholder appears in a target array.

I'm dropping the item: item appears now in the start and target array.


Solution

  • After more research I've found an open issue about that problem: https://github.com/angular/components/issues/13906

    and there I've found suggestions from participants:

    https://stackblitz.com/edit/angular-krmecd?file=src%2Fapp%2Fapp.component.ts

    This example with workaround helped me to solve this problem:

    https://stackblitz.com/edit/angular-o8exzv-jauhhi?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html

    Maybe this information will be useful for someone.