I thought this would be pretty simple, but I have not actually had much luck finding a solution to this. I’m pretty new to Angular Drag and Drop. What I’m trying to do is automatically force the insert position of the item being dragged at the end of the container (items are visually stacked on top of each other with a max of 2 elements). Right now, sometimes it inserts it before the existing element, other times, after.
I can force it in the drop event with the following:
drop(event: CdkDragDrop<PlayerPiece[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.container.data.length,
);
}
}
However, I’m not sure how to do the same thing while the element is being dragged over the container for the preview. Is there a way I can do that with the cdkDropListEntered event and force the dragged item to be added as the last child within the container?
I just adjusted the code, to push the element to Infinity, this gets rid of this bug and guarantees the position at the last of the list.
If you want to push to the top of the list then -Infinity.
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
Infinity
);
}
}
Full Code:
TS:
import { Component } from '@angular/core';
import {
CdkDragDrop,
CdkDrag,
CdkDropList,
CdkDropListGroup,
moveItemInArray,
transferArrayItem,
} from '@angular/cdk/drag-drop';
/**
* @title Drag&Drop connected sorting group
*/
@Component({
selector: 'cdk-drag-drop-connected-sorting-group-example',
templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html',
styleUrl: 'cdk-drag-drop-connected-sorting-group-example.css',
standalone: true,
imports: [CdkDropListGroup, CdkDropList, CdkDrag],
})
export class CdkDragDropConnectedSortingGroupExample {
todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
Infinity
);
}
}
}
HTML:
<div cdkDropListGroup>
<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
[cdkDropListData]="todo"
class="example-list"
(cdkDropListDropped)="drop($event)"
>
@for (item of todo; track item) {
<div class="example-box" cdkDrag>{{item}}</div>
}
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
[cdkDropListData]="done"
class="example-list"
(cdkDropListDropped)="drop($event)"
>
@for (item of done; track item) {
<div class="example-box" cdkDrag>{{item}}</div>
}
</div>
</div>
</div>
Stackblitz Demo