Cancel drag on key press Angular cdk Drag and Drop
You can move the dragged item to a position using:
event['source']['element']['nativeElement']['style']['transform'] = 'translate3d(0,0,0)';
event['source']['_dragRef']['_activeTransform'] = {x: 0, y: 0};
event['source']['_dragRef']['_passiveTransform'] = {x: 0, y: 0};
I also faced this problem for a long time. Finally I could fix it by dispatching a mouseup
event that will act as the user releasing the mouse.
@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.key === 'Escape') {
document.dispatchEvent(new Event('mouseup'));
}
}
This is an extremely hacky solution and comes with it's down sides. In fact, you are not cancelling the drag but instead dropping. Meaning that if you are hovering a cdkDropList
or one is active it will trigger the cdkDropListDropped
emmiter for that list. Something you can easily workaround by adding a flag.
private _canceledByEsq = false;
@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.key === 'Escape') {
this._canceledByEsq = true;
document.dispatchEvent(new Event('mouseup'));
}
}
handleDrop() {
if (!this._canceledByEsq) {
// Do my data manipulations
}
}
Hope this helps you... :)