CdkDragAndDrop如何防止拖拽

禁用拖动 如果要禁用特定拖动项的拖动,可以通过在cdkDrag项上设置cdkdragsabled输入来实现。此外,您可以使用cdkDropList上的cdkDropListDisabled输入或通过cdkDragHandle上的cdkDragHandleDisabled来禁用特定句柄来禁用整个列表。

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div
    class="example-box"
    *ngFor="let item of items"
    cdkDrag
    [cdkDragDisabled]="item.disabled">{{item.value}}</div>
</div>

如果要禁用特定拖动项的拖动,可以通过设置 cdkDragDisabled a上的输入 cdkDrag

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of dragedItems" cdkDrag 
[cdkDragDisabled]="item.disabled"> {{item.value}} </div>
</div>

参考文献: https://github.com/angular/material2/blob/master/src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html

https://github.com/angular/material2/pull/13722/commits/bd56a49dda5b5d2f0f0f2feac829afbe3752f5d5

您可以将cdkDragHandle与类的属性绑定在一起,比如on或off,比如toggle。

<div class="example-handle" [class.your-css-class]="!editing" cdkDragHandle>
<svg width="24px" fill="currentColor" viewBox="0 0 24 24">
  <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
  <path d="M0 0h24v24H0z" fill="none"></path>
</svg>

.your-css-class{
display: none
}