Detecting keydown/up events during HTML5 native drag

Question

I've an element that can be dragged using native HTML5. It has dragstart, drag, and dragend event listeners assigned to it. In addition, I also have keydown and keyup event listeners assigned to document.body element.

When dragging the draggable element, ondrag event will fire as expected. When I press & release any key while not dragging anything, document.body keydown/up events will fire.

However, if I keydown/up while performing ondrag, the document.body keydown/up event will not fire. Is there any workaround/hack to this?

Loophole

Can you provide an example / fiddle? – Ashcraft

Here you go: jsfiddle.net/SVArR – Loophole

I tried hard, but in webkit browsers, I cannot use key events during a normal drag event. Even without binding these events, the key events aren't registered. – Ashcraft

It's probably a browser bug/feature. – Loophole

I don't see the spec saying that keyboard presses should be blocked. I do see that this is the behavior though. What a lame surprise :) Why has this been like this for years? It's terrible! – Corregidor

Answer 1

Answering my own questions... From Drag Operations - MDN:

With the dragenter and dragover event, the dropEffect property is initialized to the effect that the user is requesting. The user can modify the desired effect by pressing modifier keys. Although the exact keys used vary by platform, typically the Shift and Control keys would be used to switch between copying, moving and linking.

On HTML5 native drag, the only key press that can trigger anything is the modifier keys. On Mac, it's the option key and the control key. Action is captured via event.dataTransfer.effectAllowed, not keypress or keydown events.

Loophole