Angular cdk drag and drop horizontally and vertically

See the below Code to interchange the position of charts and tables inside a container using angular cdk

<ng-template #noFullScreenTemplate>
      <div class="row" #container (window:resize)="onResize($event)" cdkDropListGroup>
        <ng-container *ngFor="let graph of graphs; let i = index">
          <div
            class="column"
            cdkDropList
            cdkDropListOrientation="horizontal"
            [cdkDropListData]="{ graph: graph, index: i }"
            (cdkDropListDropped)="drop($event)"
          >
            <div *ngIf="graph.type === 'graph'" cdkDrag>
              <lib-window-graph
                [graph]="toGraph(graph)"
                (selectedGraphEvent)="getSelectedGraph($event)"
                (fullscreenLayoutEvent)="getFS($event)"
                (dragShapeEvent)="draggedShape($event)"
              ></lib-window-graph>
            </div>
            <div *ngIf="graph.type === 'table'" cdkDrag>
              <lib-window-table
                [graph]="toTable(graph)"
                (selectedGraphEvent)="fullscreen($event)"
                [selectedChannelHarmonicTable]="selectedChannelHarmonicTable"
              ></lib-window-table>
            </div>
          </div>
        </ng-container>
      </div>
    </ng-template>

When attempts to pan horizontally , instead of panning, the panel is lifted and is rearranged. Need to correct position interchange of dragged item to the dropped index. This need to be work in both horizontal and vertically