Currently, I am working with the cdk Drag drop feature
<div class="example-container" cdkDropListGroup>
To properly understand and describe data, it is crucial to be aware of the level of variability. This can be determined by analyzing the measures of dispersion.
<div cdkDropList [cdkDropListData]="done" class="example-list" cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)">
<div class="example-box drobtnstyle" cdkDrag>{{ done[0] }}</div>
</div>
,
<div cdkDropList [cdkDropListData]="done" class="example-list" cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)">
<div class="example-box drobtnstyle" cdkDrag>{{ done[1] }}</div>
</div>
, and
<div cdkDropList [cdkDropListData]="done" class="example-list" cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)">
<div class="example-box drobtnstyle" cdkDrag>{{ done[2] }}</div>
</div>
are commonly utilized measures of dispersion in data analysis.
<div cdkDropList [cdkDropListData]="todo" class="example-list" cdkDropListSortingDisabled="true" (cdkDropListDropped)="drop($event)">
<button class="example-box btn drobtn2 " *ngFor="let item of todo" cdkDrag>{{ item }}</button>
</div>
</div>
Link : https://stackblitz.com/edit/angular-xnirx8?file=src%2Fapp%2Fapp.component.html
In this setup, there are three empty slots where users can place any of the 'todo' items into done[0], done[1], and done[2]. However, an issue arises when placing an item in the done[2] slot causing it to revert back to the done[0] position automatically.
If you have a solution for this specific issue, your input would be greatly appreciated. Thank you!