Question

我想创建一个拖放列表，用户可以在其中添加自己的项目，但前三个是我设置的，并且必须在列表顶部置入/禁用。

项目列表是一个字符串数组，如果我想保留它，就不能使用'cdkDragDisabled'。借助“ cdkDragDisabled”，仍然可以对项目进行排序。

当我在项目的div中删除cdkDrag时，它的行为与我想要的一样。这些项目不可拖动且在其位置上不粘。问题是，当我拖放数组中的其他项目时也会对其进行排序。例如：当我切换项目4和5（可拖动）时，项目1和2彼此切换位置。

html中的dropList：

<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标记的项目保持其位置，并且在触摸其他项目时不会移动。有没有一种方法可以使用同一下拉列表中的所有项目来实现这一目标？

如何禁用一项在cdkDropList中的拖动和排序

0 个答案: