How to disable one item from dragging and sorting in a cdkDropList

I want to create a drag and drop list where users can add their own items but the first three are set by me and those must be sticky/disabled to the top of the list.

The item list is an array of strings, if I want to keep it that way I can't use the 'cdkDragDisabled'. And with the 'cdkDragDisabled' it is still possible to sort the items.

When I remove the cdkDrag in the div of an item it behaves as I want it. The items are non dragable and sticky on their position. The problem is that when I drag and drop other items in the array are also sorted. Example: when I switch item 4 and 5 (which are dragable) item 1 and 2 switch positions with each other.

The dropList in the html:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let itemField of itemFields | slice:0:3;" cdkDrag>{{itemField}}
</div>
<div class="example-box" *ngFor="let itemField of itemFields | slice:3;" cdkDrag cdkDragLockAxis="y">
{{itemField}}
<button mat-icon-button (click)="editCustomItemField(itemField)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button (click)="removeCustomItemField(itemField)">
<mat-icon>remove_circle_outline</mat-icon>
</button>
</div>
</div>


the ts file:

itemFields = ['Title', 'Image', 'Description', 'box4', 'box5'];

drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.itemFields, event.previousIndex, event.currentIndex);
}


I would expect that the items, when not having cdkDrag tag are sticking to their position and not moving when others are touched. Is there a way to achieve this with all the items within the same droplist?

Continue reading...