Angular CDK 拖放：取消拖放操作答案

【问题标题】：Angular CDK Drag and Drop: Cancel drag-actionAngular CDK 拖放：取消拖放操作
【发布时间】：2018-10-02 12:06:51
【问题描述】：

使用 @angular/cdk 的新拖放功能（我目前使用的是 7.0.0-beta.2 版本），是否可以取消拖放操作？

我没有在“CdkDrag”上找到可以解决问题的匹配函数。

从 2019-01-10 编辑

感谢您迄今为止的回复。不过，我想我还不够清楚：我正在寻找一种方法来取消已经在进行的拖动动作。 IE。在拖动项目时，我希望有可能使该项目返回到它来自的容器（例如，通过按 Escape 键）。

有什么想法吗？

【问题讨论】：

我也想知道！
遗憾的是，看起来还没有 API 可以做到这一点：github.com/angular/components/issues/13661

标签： angular drag angular2-directives angular-cdk

【解决方案1】：

anguar 7.0.0 不可能，你必须更新到 angular 7.1.0，然后你有：

[cdkDragDisabled]="condition"

效果很好！

【讨论】：

我可以通过 CSS 显示移动同一张卡片吗？如图片（链接）所示，它显示的是移动文本数据而不是整个卡片（使用 CSS 样式）medium.com/@er.markar/…

【解决方案2】：

如果您想禁用特定拖动项的拖动，可以通过在 cdkDrag 项上设置 cdkDragDisabled 输入来实现。

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of dragedItems" cdkDrag 
[cdkDragDisabled]="item.disabled"> {{item.value}} </div>
</div>

【讨论】：

【解决方案3】：

最近在 CdkDrag 中添加了重置功能。

例如，如果您有以下可拖动的 div：

<div cdkDrag (cdkDragEnded)="onDragEnded($event)"></div>

你可以这样恢复到原来的位置：

onDragEnded(event: CdkDragEnd): void {
    if (condition) {
        event.source._dragRef.reset();
    }
}

https://github.com/angular/components/issues/13661

【讨论】：

【解决方案4】：

我多年来一直在寻找该功能。事实证明，这很简单：

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

（见于Cancel drag on key press Angular cdk Drag and Drop）

【讨论】：