Question

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

我没有在'CdkDrag'上找到匹配的函数来解决问题。

从2019年1月10日编辑

感谢到目前为止的答复。不过，我想我还不够清楚：我正在寻找一种取消正在进行的拖动动作的方法。即在拖动项目时，我希望可以使该项目返回到它所在的容器中（例如，按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

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

pear

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

Angular CDK拖放：取消拖动操作

4 个答案: