Angular CDK Drag and Drop: отмена перетаскивания

Question

С новой функцией перетаскивания @angular/cdk (в настоящее время я использую версию 7.0.0-beta.2), возможно ли отменить действие перетаскивания?

Я не нашел подходящей функции в 'CdkDrag', которая могла бы добиться цели.

Answer 1

Это невозможно с anguar 7.0.0, вам нужно обновить до angular 7.1.0, тогда у вас есть:

[cdkDragDisabled]="condition"

который работает отлично!

Answer 2

Если вы хотите отключить перетаскивание для определенного элемента перетаскивания, вы можете сделать это, установив вход cdkDragDisabled для элемента cdkDrag.

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

Answer 3

Функция сброса была недавно добавлена ​​в CdkDrag.

Например, если у вас есть следующий перетаскиваемый div:

<div cdkDrag (cdkDragEnded)="onDragEnded($event)"></div>

Вы можете восстановить его в исходное положение следующим образом:

onDragEnded(event: CdkDragEnd): void {
    if (condition) {
        event.source._dragRef.reset();
    }
}

https://github.com/angular/components/issues/13661

Answer 4

Я искал эту функцию целую вечность. Оказывается, это достаточно просто:

private _canceledByEsc = false;

@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
    if (event.key === 'Escape') {
        this._canceledByEsc = true;
        document.dispatchEvent(new Event('mouseup'));
    }
}

handleDrop() {
    if (!this._canceledByEsc) {
        // probably just return and don't do any array manipulations
    }
}

(видно по кнопке "Отменить перетаскивание по нажатию клавиши" "Угловой CDK Drag and Drop")