angular - Angular CDK 拖放：取消拖放操作

Question

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

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

编辑自 2019-01-10

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

有任何想法吗？

Answer 1

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

[cdkDragDisabled]="condition"

效果很好！

Answer 2

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

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

Answer 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

Answer 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）