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

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

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

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

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

Вы также можете использовать cdkDragHandleDisabled, чтобы отключить только дескриптор перетаскивания https://material.angular.io/cdk/drag-drop/overview#disabled-draging .