Angular CDK Drag and Drop: Cancel drag-action

Question

With the new drag and drop feature of the @angular/cdk (I'm currently using version 7.0.0-beta.2), is it possible to cancel a drag-action?

I did not find a matching function on 'CdkDrag' which could do the trick.

Edit from 2019-01-10

Thanks for the responses so far. I guess I wasn't clear enough, though: I'm looking for a way to cancel a drag-action which is already in progress. I. e. while dragging an item, I want to have the possibility to make that item return to the container where it comes from (e. g. by pressing the Escape key).

Any ideas?

Sadly it doesn't yet look like there's an API do do this: https://github.com/angular/components/issues/13661 — Peter Nixey, Oct 15 '21 at 11:25

score 6 · Answer 1 · answered Nov 30 '18 at 09:52

6

it's not possible with anguar 7.0.0, you have to update to angular 7.1.0, then you have:

[cdkDragDisabled]="condition"

which works perfect!

answered Nov 30 '18 at 09:52

cucuru

3,456
8
40
74

Can I show moving the same card as it through CSS. As in the image (link) it is showing moving text data not the whole card (with CSS styles) https://medium.com/@er.markar/can-i-show-moving-the-same-card-as-it-through-css-9edda248094 – Sunil Garg Aug 14 '19 at 06:11

score 2 · Answer 2 · answered Jan 07 '19 at 13:47

If you want to disable dragging for a particular drag item, you can do so by setting the cdkDragDisabled input on a cdkDrag item.

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

score 2 · Answer 3 · answered Jun 13 '19 at 08:37

A reset function has recently been added to CdkDrag.

As example, if you have the following draggable div:

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

You can restore it to its original position like this:

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

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

Attila Pinter · Answer 4 · 2019-01-27T14:20:45.810

I was looking for that feature for ages. Turns out, it is simple enough:

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

(seen on Cancel drag on key press Angular cdk Drag and Drop)

Angular CDK Drag and Drop: Cancel drag-action

4 Answers4