Need to drag and drop an item from left panel to right one - drag-and-drop

Question

I am new to Angular Material drag and drop feature, so kindly bear with me.
I have list of items on left panel. I need to drag an item and drop it on the right panel.
I don't need sorting in left panel list, only dragging and dropping it on right side. And when I drop the item, I need some change event to occur when that material is dropped.
I was able to use cdkDrag on left panel but don't know how to drop the item. I tried to use cdkDrop, but in vain.
Here is my sample code: https://stackblitz.com/edit/angular-cevn3d
Thanks.

Answer 1

Here is a possible solution made from the example given by Angular Material:
<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doneList]"
class="example-list">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
I removed (cdkDropListDropped)="drop($event)" and [cdkDropListConnectedTo]="[todoList]" ​​to not drop from right to left.
DEMO: Stackblitz