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

Question

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

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

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

Answer 1

更新了堆栈闪电战

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

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