cdkDropListDropped event not emitted when item is dropped

Question

I am trying to do drag and drop without deleting the item from the dragged list. I followed an example Working demo and tried to reproduce the same. Unfortunately it was not working and I found that the cdkDropListDropped event is emitted. You can find the issue in this link Problematic demo

I want to achieve like the Working demo

Please show me where I am wrong.

Answer 1

I found I had to move the directives cdkDropList and cdkDropListConnectedTo="drop-list" from the div with ID div1 to the parent div so the HTML becomes:

<div class="column left" cdkDropList cdkDropListConnectedTo="drop-list">
    <div id="div1" cdkDrag  *ngFor="let type of types" [cdkDragData]="type" (cdkDragMoved)="moved($event)" (cdkDropListDropped)="itemDropped($event)">
        {{type.text}}
        <div *cdkDragPlaceholder class="field-placeholder"></div>
    </div>
</div>

At this point the cdkDropListDropped event fired and called the itemDropped function. The problem then was, there was a runtime error on the following line:

copyArrayItem(
     event.previousContainer.data,
     event.container.data,
     event.previousIndex,
     event.currentIndex
);

After copying the itemDropped method from your working demo StackBlitz, it then started work. Please see this StackBlitz for a demo.