Opt out of the browser's native cancel animation

[psychedelicious]

• Is it possible to opt out of the browser's native cancel animation, which moves the native drag preview back to its origin?
• It seems the onDropTargetChange and onDrop events fire after the cancel animation finishes. Is it possible to detect cancelation before the animation finishes?

Thanks.

[yangannyx]

It doesn't seem like there's a way to opt out of the animation in the HTML Drag and Drop specification

The drag was canceled. If the platform conventions dictate that this be represented to the user (e.g. by animating the dragged selection going back to the source of the drag-and-drop operation), then do so.

[psychedelicious]

Thanks @yangannyx.

I did some experimentation and reading:

• Detecting the when the user cancels a drag is not be possible. While a drag is in progress, the browser enters a kind of takeover mode where it overrides handling of input events. It varies by platform, but generally all inputs are ignored except these, which the browser handles "above" all application logic in JS:
  • Pointer movements, used to move the dragged object
  • Pointer up/down, used to commit the drag
  • A very narrow set of keyboard inputs, usually modifier keys, used to change the drop effect (e.g. change from a copy to a move operation). These appear to be on keydown.
  • A key to cancel the drag, usually (always?) escape. This appears to be on keydown.
    Other inputs are ignored. Unfortunately, this means you cannot even listen for the esc keydown.
• The dragend event only fires after the animation finishes (tested on FF and Chrome) - not on the esc keydown.

There's some inconsistency, where a no-op drop (e.g. a drop on something without a handler for the event) immediately hides the drag preview, but a canceled drag does the animation.

What I wanted to do was get the same behaviour as a no-op drop, when canceling a drop. In the application, I wanted to revert my "potential" drop targets' styling immediately, instead of waiting for the animation to finish. But because we cannot detect the drop cancelation, it's not possible. No biggie.

Maybe I've missed something here - I'll leave this open in case any others with more experience with the native dnd APIs know of a workaround.

[psychedelicious]

I noticed this in the docs for preventUnhandled:

Your are disabling a native drag preview and you want to prevent the default "cancel" animation on a cancelled drag

So maybe there is a way to opt out of the cancel animation, or detect cancellation as soon as the user cancels?

[declan-warn]

Hey @psychedelicious the preventUnhandled utility will ensure that every drop on the page is handled, even if you drop outside of a drop target. I think this is what you mean by a 'no-op drop'.

Unfortunately, as far as I know the animation cannot be avoided when a user presses esc.