How to drag and drop elements horizontally and vertically in angular?

I have created drag and elements with the help of cdk-angular (https://material.angular.io/cdk/drag-drop/overview) but the problem is I can only drag and drop the elements either horizontally or vertically.

Suppose I have an array like this.

completed = [{
name: 'HTML',
},
{
name: 'CSS',
},
{
name: 'Angular',
},
{
name: 'React',
},
{
name: 'Vue',
}
];


and in Html I am using it in the following way

<div class="list"
cdkDropList
#todoList="cdkDropList"
cdkDropListOrientation="horizontal"
[cdkDropListData]="completed"
[cdkDropListConnectedTo]="[doneList]"
(cdkDropListDropped)="onDrop($event)">

<ng-container *ngFor="let option of options;let i = index">
<div class="mat-card" cdkDrag>
<p>{{option.name}}</p>
</div>
</ng-container>

</div>


Here is the result

After adding cdkDropListOrientation="horizontal" I can drag horizontally, and when I remove it I can drag it vertically.

But when the options are big then I need to wrap it and then I need horizontal and vertical drag together. Can anyone put some lights on it. I'm stuck at this point.

Continue reading...