Angular CDK 拖放：取消拖动操作

Question

使用@angular/cdk（我目前使用的版本是7.0.0-beta.2）的新拖放功能，是否可以取消拖动操作？在'CdkDrag'上没有找到可完成此操作的匹配函数。谢谢到目前为止的回复。但是我想表达得不够清楚：我正在寻找一种取消已经进行的拖动操作的方法。也就是说，在拖动项目时，我想有可能使该项目返回到它来自的容器中（例如，通过按Esc键）。你有什么想法吗？

- Johannes Heucher

---

我也想找出来！ - Luca De Nardi

很遗憾，目前似乎还没有API可以做到这一点：https://github.com/angular/components/issues/13661 - Peter Nixey

Answer 1

在Angular 7.0.0中不可能实现，您需要升级到Angular 7.1.0，然后您将拥有以下功能：

[cdkDragDisabled]="condition"

这个功能完美运行！

- cucuru

---

我能否通过CSS显示移动相同的卡片。就像图片（链接）中显示的那样，它显示移动文本数据而不是整个带有CSS样式的卡片。 https://medium.com/@er.markar/can-i-show-moving-the-same-card-as-it-through-css-9edda248094 - Sunil Garg

Answer 2

最近在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

- AleRubis

Answer 3

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

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

- Mohd. Shariq

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

（在 Angular cdk拖放中取消键按下的拖动 中看到）

- Attila Pinter