How to make set of mat-card containing different charts have drag and drop feature and auto align - drag-and-drop

Question

HTML
<div class="boundary">
<div cdkDrag fxLayout="row wrap" fxLayoutGap="15px" cdkDropListOrientation="horizontal" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropData]="list">
<div *ngFor="let li of list" [cdkDragData]="li" cdkDrag cdkDragBoundary=".boundary">
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 1">
<mat-card matBadge="2" matBadgeColor="warn" matBadgeOverlap="true">
<div style="display: block">
<canvas baseChart [data]="pieChartData0" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 2">
<mat-card>
<div style="display: block">
<canvas baseChart [data]="pieChartData1" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 3">
<mat-card matBadge="1" matBadgeColor="warn" matBadgeOverlap="true">
<div style="display: block">
<canvas baseChart [data]="pieChartData2" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 4">
<mat-card>
<div style="display: block">
<canvas baseChart [data]="pieChartData3" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 5">
<mat-card>
<div style="display: block">
<canvas baseChart [data]="pieChartData4" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 6">
<mat-card>
<div style="display: block">
<canvas baseChart [data]="pieChartData4" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 7">
<mat-card>
<div style="display: block">
<canvas baseChart [data]="pieChartData4" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
<div cdkDragBoundary=".boundary" class="mt_15" *ngIf="li == 8">
<mat-card>
<div style="display: block">
<canvas baseChart [data]="pieChartData4" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [colors]="pieChartColors"></canvas>
</div>
</mat-card>
</div>
</div>
</div>
</div>
TS
import { Component, OnInit, ViewChild } from '#angular/core';
import { ChartType, ChartOptions, Chart } from 'chart.js';
import { Label } from 'ng2-charts';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
list = [1, 2, 3, 4, 5, 6, 7, 8];
pieChartOptions: ChartOptions;
pieChartLabels: Label[];
pieChartData0: number[];
pieChartData1: number[];
pieChartData2: number[];
pieChartData3: number[];
pieChartData4: number[];
pieChartType: ChartType;
pieChartLegend: boolean;
pieChartPlugins = [];
pieChartColors = []
constructor( ) { }
ngOnInit(): void {
Chart.plugins.register
this.pieChartOptions = this.createOptions()
this.pieChartLabels = ['Abnormal', 'Warning', 'No Abnormality'];
this.pieChartData0 = [2, 0, 8];
this.pieChartData1 = [0, 0, 10];
this.pieChartData2 = [2, 5, 3];
this.pieChartData3 = [2, 0, 8];
this.pieChartData4 = [0, 0, 10];
this.pieChartType = 'pie';
// this.pieChartPlugins = [pluginLabels];
// this.pieChartLegend = true
this.pieChartColors = [
{
backgroundColor: ['orange', 'darkorange', 'lightblue'],
}
];
}
private createOptions(): ChartOptions {
return {
responsive: true,
// maintainAspectRatio: false,
legend: {
display: false,
labels: {
padding: 10,
boxWidth: 13,
},
position: 'bottom',
},
plugins: {
labels: {
render: 'value',
fontSize: 16,
position: 'center',
fontStyle: '500',
fontFamily: "'Roboto', 'Helvetica Neue', 'sans-serif'",
precision: 2
},
}
}
}
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.list, event.previousIndex, event.currentIndex);
}
}
I'm able to achieve drag and drop but auto alignment is not working based on the id for each div.
I took the reference from the following link Drag-Drop
Using the reference it's achieavable to just drag anywhere, but as I want it should be within certain space for which I used class i.e boundary.
Also since I'm not able to get the card as dynamic so I'm using *ngIf contion.
If anyone have any suggestion or reference that would be of much help.