使用@angular/cdk(我目前使用的版本是7.0.0-beta.2)的新拖放功能,是否可以取消拖动操作?在'CdkDrag'上没有找到可完成此操作的匹配函数。谢谢到目前为止的回复。但是我想表达得不够清楚:我正在寻找一种取消已经进行的拖动操作的方法。也就是说,在拖动项目时,我想有可能使该项目返回到它来自的容器中(例如,通过按Esc键)。你有什么想法吗?
在Angular 7.0.0中不可能实现,您需要升级到Angular 7.1.0,然后您将拥有以下功能:
[cdkDragDisabled]="condition"
这个功能完美运行!
<div cdkDrag (cdkDragEnded)="onDragEnded($event)"></div>
最初的回答:
onDragEnded(event: CdkDragEnd): void {
if (condition) {
event.source._dragRef.reset();
}
}
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of dragedItems" cdkDrag
[cdkDragDisabled]="item.disabled"> {{item.value}} </div>
</div>
我寻找那个功能已经很久了。结果,原来它非常简单:
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拖放中取消键按下的拖动 中看到)