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

Я пытаюсь использовать модуль Angular Material CDK DragDrop из 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>

angular angular-material angular-cdk
person Perrier    schedule 13.11.2018    source источник

Ответы (3)


arrow_upward
39
arrow_downward

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

arrow_upward
12
arrow_downward

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

person Mohd. Shariq    schedule 07.01.2019

arrow_upward
3
arrow_downward

Вы можете использовать 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
}
person Narendra Singh Rathore    schedule 13.11.2018
comment
ngIf = false не будет работать, потому что он полностью удаляет элемент, что означает, что элемент cdkDrag не будет иметь ручки перетаскивания, поэтому весь элемент будет перетаскиваемым. - person Perrier; 13.11.2018
comment
В этом случае просто [style.display] = someProperty? 'none': 'block', он скроет его, а также пользователь не сможет перетаскивать. - person Narendra Singh Rathore; 13.11.2018
comment
Это сработало, спасибо! Хотели бы вы отредактировать свое решение? Я использовал [class.display-none]="!editing" на cdkDragHandle. - person Perrier; 13.11.2018
comment
Да, я обновил ответ, вы можете отметить его как ответ и проголосовать, если это будет полезно. - person Narendra Singh Rathore; 13.11.2018