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

【问题标题】：How to fix the position of an element in drag and drop - Angular如何在拖放中固定元素的位置 - Angular
【发布时间】：2021-02-25 05:15:40
【问题描述】：

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

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

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

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：