取消拖动按键按Angular cdk拖放

Question

我正在一个应用程序实现新的拖放从角度材料CDK和我试图取消元素按下的拖动事件Esc,我的意思是,我开始拖动元素,但如果我按,Esc而我拖动元素,它应该回到我开始拖动它的位置,到目前为止我还没有找到一种方法来做到这一点,有谁知道我怎么能这样做.关于这个任何想法的cdk文档中没有任何内容.我尝试做这样的事情.

模板

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" (cdkDragEnded)="onDragEnded($event)" cdkDrag>{{movie}}</div>
</div>

Ts分量

onDragEnded(event: CdkDragEnd) {
  console.log(event)
  event.source.element.nativeElement.style.transform = 'none';
  const source: any = event.source;
  source._passiveTransform = { x: 0, y: 0 };
}

但到目前为止没有成功.

Answer 1

我也遇到这个问题很长时间了。最后，我可以通过调度一个mouseup充当用户释放鼠标的事件来修复它。

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

这是一个非常hacky的解决方案，并且有它的缺点。实际上，您不是取消拖动而是放下。这意味着如果您悬停一个cdkDropList或一个处于活动状态，它将触发该cdkDropListDropped列表的发射器。您可以通过添加标志轻松解决的问题。

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

希望这对你有帮助... :)