How to drop an element of a cdkDropList into a div?

Question

I have a left and a right div. The left div contains a cdkDropList. What I want to archieve, is that the items of the DropList stay in the right div once dragged there. The Status quo is that they always move back into the DropList once dropped into something that is not a cdkDropList.

Basically I want to create a cdkDrag out of the elements of a cdkDropList. The elements of a DropList already are cdkDrags, however i cannot seem to seperate them from the DropList.

Edit: I do not want to transfer an item from one list to another. I want to drag an item from a droplist and drop it anywhere i want. For example in the example documentaion take an item from the second example, and when dropped it becomes the third example.

Answer 1

A quick look at the Angular Material could've helped you way faster I guess.

Angular Material Documentation: Look for the last example => Drag&Drop connected sorting

And here is a Stackblitz example for that