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

问题描述

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

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.

模板

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

但到目前为止没有成功。

but no success so far.

推荐答案

我也遇到了这个问题很长一段时间。最后我可以通过发送 mouseup 事件来解决它，该事件将充当释放鼠标的用户。

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'));
    }
}

这是一个非常hacky的解决方案，随之而来两侧。事实上，你不是取消阻力而是放弃。这意味着如果您正在悬停 cdkDropList 或其中一个处于活动状态，它将触发该列表的 cdkDropListDropped emmiter。您可以通过添加标记轻松解决问题。

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屋！