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