How can I relate a cdk drag item into a list of cdk drop list?

Issue

I want to build a simple drag and drop game using @angular/cdk/drag-drop module, I have some drop zones and a draggable item that the player should choose the correct drop zone and drag the item to it. my problem is I can't bind my custom data objects to drop zone lists.

here is my project on stackblitz: https://stackblitz.com/edit/angular-ivy-42drhc?devtoolsheight=33

Thanks for your help.

Solution

With @angular/cdk/drag-drop you can only drag items between lists in fact you have to add a div withcdkDropList around your player item like you have done it the other zones.

Answered By - zerocewl