CdkDragAndDrop, как предотвратить перетаскивание

Question

Я пытаюсь использовать модуль DragDrop Angular Material CDK из https://material.angular.io/cdk/drag-drop/overview

С помощью события 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

Если вы хотите отключить перетаскивание для определенного элемента перетаскивания, вы можете сделать это, установив вход cdkDragDisabled для элемента 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

Answer 2

Отключить перетаскивание Если вы хотите отключить перетаскивание для определенного элемента перетаскивания, вы можете сделать это, установив вход cdkDragDisabled для элемента cdkDrag. Кроме того, вы можете отключить весь список, используя вход cdkDropListDisabled в cdkDropList или определенный дескриптор через cdkDragHandleDisabled в 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>

Answer 3

Вы можете использовать cdkDragHandle со связыванием свойств с «классом» для некоторых свойств, например, для включения или выключения чего-то вроде переключения.

<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
}