drag-drop: allow cancelation of dragged element

[francois-appliware]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

I tried to search and find for a way to cancel a simple dragged element, tagged by a [cdkDrag] directive, without any drop container. (1st exemple here: https://beta-angular-material-io.firebaseapp.com/cdk/drag-drop/overview).

What is the current behavior?

I tried by listening to the (cdkDragEnded) and restyle the native element transform to none. Which does simulate a cancel, but unfortunately, when dragging the item again, it starts from the previous position (the one that got 'canceled')
This is the code I used as a test:

<div class="grid-item" cdkDrag (cdkDragEnded)="onDragEnded($event)">
  <anything />
</div>

onDragEnded(event: CdkDragEnd) {
  event.source.element.nativeElement.style.transform = 'none'
}

What is the use-case or motivation for changing an existing behavior?

I am trying to create a dynamic grid where a user could drag and drop an item around to change its position in the grid. Because I use CSS Grid, I want to get the final drag position, calculate the column and row that surround that position, set it as my item style and remove the translate applied by the drag-and-drop module

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "7.0.0-rc.1",
"@angular/cdk": "7.0.0-rc.1",
"@angular/common": "7.0.0-rc.1",
"@angular/compiler": "7.0.0-rc.1",
"@angular/core": "7.0.0-rc.1",
"@angular/forms": "7.0.0-rc.1",
"@angular/http": "7.0.0-rc.1",
"@angular/material": "7.0.0-rc.1",
"@angular/material-moment-adapter": "7.0.0-rc.1",
"@angular/platform-browser": "7.0.0-rc.1",
"@angular/platform-browser-dynamic": "7.0.0-rc.1",
"@angular/router": "7.0.0-rc.1",

[crisbeto]

Something similar came up in #12935 (comment).

[francois-appliware]

Indeed I did not see the discussion for that. But for now, it would still validate the drop as I understand it.

After some research on how the CdkDrag works, I found that the following code resets the Dragged element to its origin, and remove the problem I talked about (the fact that re-dragging same element would make it pop to its last dropped position).

It is highly hacky as I have to manually restyle the native element and cast the CdkDrag source as any so Typescript does not bark for accessing something I should not access. :)

onDragEnded(event: CdkDragEnd) {
    event.source.element.nativeElement.style.transform = 'none' // visually reset element to its origin
    const source: any = event.source
    source._passiveTransform = { x: 0, y: 0 } // make it so new drag starts from same origin
}

with the following HTML

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

Cheers!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}