How to fix the position of an element in drag and drop - Angular

1
votes

I am using angular material drag and drop to give the user an option to change the order of the items based on his choice but I want one element to be static so that Its order can not be changed and neither any item can be placed above it. I am using the disabled property but I am not getting the expected result. could any please tell me how can I make the No -item position fixed so that its position cannot be changed and neither any item can be placed above it?

I have created a demo of the same under the below link.

https://stackblitz.com/edit/angular-drag-and-drop-example-123?file=src%2Fapp%2Fcdk-drag-drop-disabled-example.html

1
angularangular-material

1 Answers

2
votes

Updated Stackblitz

I do not believe there is a built in property to do what you are asking. However it can be done by splitting the items that can to be dragged or not.

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let item of items">
        <div class="example-box" *ngIf="item.disabled">
            {{item.name}} </div> </ng-container> 
      

        <ng-container *ngFor="let item of items">
      <div class="example-box" *ngIf="!item.disabled" cdkDrag
                >
                {{item.name}}
        </div>
    </ng-container> 
</div>