I'm trying to use the Angular Material CDK DragDrop module from https://material.angular.io/cdk/drag-drop/overview
With the cdkDropListDropped event I can prevent dropping but it shouldn't be dragged either. How can I tell a cdkDropList or each cdkDrag elements to disable dragging?
<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>
Disable dragging If you want to disable dragging for a particular drag item, you can do so by setting the cdkDragDisabled input on a cdkDrag item. Furthermore, you can disable an entire list using the cdkDropListDisabled input on a cdkDropList or a particular handle via cdkDragHandleDisabled on cdkDragHandle.
<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>