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?

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.