angular - CdkDragAndDrop如何防止拖拽

Question

我正在尝试使用 https://material.angular.io/cdk/drag-drop/overview 中的 Angular Material CDK DragDrop 模块

使用 cdkDropListDropped 事件，我可以防止丢弃，但也不应该拖动它。如何告诉 cdkDropList 或每个 cdkDrag 元素禁用拖动？

<div class="list-group" id="orderlist" cdkDropList (cdkDropListDropped)="drop($event)">
                        <a class="list-group-item" 
                            [class.linked]="ord.linkedToPrevious" 
                            [class.selected]="ord.selected"
                            *ngFor="let ord of items" (click)="selectOrder(ord, $event)" cdkDrag>
                            <button class="btn btn-default btn-link linkeditem" [class.linked]="ord.linkedToPrevious" 
                                (click)="linkTechnology(ord, $event)" 
                                    [attr.disabled]="editing ? null : true">
                                <span class="glyphicon glyphicon-link"></span>
                            </button>
                            <h4>{{ord.technology.name}}</h4>
                        </a>
                    </div>

Answer 1

禁用拖动
如果要禁用特定拖动项的拖动，可以通过在 cdkDrag 项上设置 cdkDragDisabled 输入来实现。此外，您可以使用 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>