Как отключить перетаскивание и сортировку одного элемента в cdkDropList

Question

Я хочу создать список перетаскивания, в котором пользователи могут добавлять свои собственные элементы, но первые три установлены мной, и они должны быть прикреплены / отключены в верхней части списка.

Список элементовэто массив строк, если я хочу сохранить его таким образом, я не могу использовать 'cdkDragDisabled'.А с помощью 'cdkDragDisabled' все еще можно сортировать элементы.

Когда я удаляю cdkDrag в элементе div, он ведет себя так, как я хочу.Элементы не перетаскиваются и закреплены на своих местах.Проблема в том, что при перетаскивании другие элементы в массиве также сортируются.Пример: когда я переключаю элементы 4 и 5 (которые можно перетаскивать), элементы 1 и 2 переключаются между собой.

DropList в 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>

в файле ts:

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

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

Я ожидал бы, что элементы, не имеющие тега cdkDrag, придерживаются своей позиции и не двигаются, когда к ним прикасаются.Есть ли способ добиться этого со всеми элементами в одном выпадающем списке?