С новой функцией перетаскивания в @ angular / cdk (сейчас я использую версию 7.0.0-beta.2), можно ли отменить перетаскивание?
Я не нашел подходящей функции на «CdkDrag», которая могла бы помочь.
Изменить от 10 января 2019 г.
Спасибо за ответы. Думаю, я не совсем понял: я ищу способ отменить действие перетаскивания, которое уже выполняется. I. e. при перетаскивании элемента я хочу иметь возможность вернуть этот элемент в контейнер, откуда он был (например, нажав клавишу Escape).
Любые идеи?
это невозможно с anguar 7.0.0, вам нужно обновить до angular 7.1.0, тогда у вас есть:
[cdkDragDisabled]="condition"
который отлично работает!
Если вы хотите отключить перетаскивание для определенного элемента перетаскивания, вы можете сделать это, установив вход cdkDragDisabled для элемента cdkDrag.
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of dragedItems" cdkDrag
[cdkDragDisabled]="item.disabled"> {{item.value}} </div>
</div>
В 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
Я искал эту функцию целую вечность. Оказывается, достаточно просто:
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)
