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

Question

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

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

Редактировать с 2019-01-10

Спасибо за ответы до сих пор.Думаю, я не был достаточно ясен: я ищу способ отменить действие перетаскивания, которое уже выполняется.И. е.при перетаскивании элемента я хочу, чтобы у него была возможность вернуть этот элемент в контейнер, откуда он прибыл (например, путем нажатия клавиши Escape).

Есть идеи?

Answer 1

Функция сброса была недавно добавлена ​​в 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 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

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

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

(видно по Отмена перетаскивания при нажатии клавиши Angular cdk Drag and Drop )

Answer 4

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

[cdkDragDisabled]="condition"

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