取消拖动按键 Angular cdk 拖放 [英] Cancel drag on key press Angular cdk Drag and Drop

问题描述

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

模板

<div class="example-box" *ngFor="让电影的电影" (cdkDragEnded)="onDragEnded($event)" cdkDrag>{{movie}}</div>

Ts 组件

onDragEnded(event: CdkDragEnd) {控制台日志(事件)event.source.element.nativeElement.style.transform = 'none';常量源:any = event.source;source._passiveTransform = { x: 0, y: 0 };}

但目前还没有成功.

解决方案

我也遇到这个问题很久了.最后，我可以通过调度一个 mouseup 事件来修复它，该事件将充当用户释放鼠标的角色.

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

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

private _canceledByEsq = false;@HostListener('window:keyup', ['$event'])handleKeyboardEvent(事件:KeyboardEvent){if (event.key === 'Escape') {this._canceledByEsq = true;document.dispatchEvent(new Event('mouseup'));}}处理下降(){如果(！this._canceledByEsq){//做我的数据操作}}

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

I´m working in a application implementing the new drag and drop from angular material CDK and i´m trying to cancel the drag event of the element pressing Esc, i mean, i start dragging the element but if i press Esc while i´m dragging the element, it should go back to the position from where i start dragging it, so far i haven´t found a way to do this, does anyone know how can i do this. There nothing in the cdk documentation about this any idea. i try doing something like this.

Template

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

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

but no success so far.

解决方案

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... :)

这篇关于取消拖动按键 Angular cdk 拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！