CdkDragAndDrop how to prevent dragging

Question

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>

Corium

Answer 1

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>

Soot

Answer 2

If you want to disable dragging for a particular drag item, you can do so by setting the cdkDragDisabled input on a cdkDrag item.

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

Reference: 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

Molehill

Answer 3

You can use cdkDragHandle with Property binding with “class” some property like on or off something like 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
}

Vigue

ngIf="false" will not work because it completely removes the element which means the cdkDrag element won't have a draghandle so the complete element will be draggable. – Corium

In that case, just [style.display]="someProperty ? 'none' : 'block' " , it will hide it and also user will not able to drag. – Vigue

It has worked, thanks! Would you like to edit your solution? I have used [class.display-none]="!editing" on cdkDragHandle. – Corium

Yes, i had updated the answer, you can mark it answer and up vote if useful. – Vigue

Answer 4

You can also use cdkDragHandleDisabled to disable only drag handle https://material.angular.io/cdk/drag-drop/overview#disabled-dragging

Warship