如何在拖放中固定元素的位置 - Angular

Question

我正在使用角度材料拖放来为用户提供一个选项来根据他的选择更改项目的顺序，但我希望一个元素是静态的，这样它的顺序就不能改变，任何项目都不能改变放在它上面。 我正在使用 disabled 属性，但没有得到预期的结果。任何人都可以告诉我如何使 No -item 位置固定，使其位置不能改变并且任何项目都不能放置在它上面？

我在下面的链接下创建了一个相同的演示。

<块引用>

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

Answer 1

Updated Stackblitz

我不相信有内置属性可以满足您的要求。但是可以通过拆分可拖动或不可拖动的项目来完成。

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