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

Question

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.