html - No key events during HTML5 drag and drop

Question

I have a screen that is extensively using Html5 drag and drop, and it works well except for the scrolling behavior while dragging. The screen will scroll when you drag to the edge of the window, but that does not work that well. Now, the users would not mind if they could simply use the arrow-up/down or page-up/down keys to scroll but this does not work apparently! Using old school drag/drop techniques (jquery.ui.draggable for instance), you do not have this problem, it is only when using the draggable="true" method.

I was thinking that I could maybe catch the events and provide this behavior myself. So I did a little test, and bound event handlers to window.keydown and window.keyup and guess what: none of the browsers I tested fire any key events while dragging.

$(window).keyup(function() {
    $('#log').append('<div>key up</div>');
});

$(window).keydown(function() {
    $('#log').append('<div>key down</div>');
});

$(window).keypress(function() {
    $('#log').append('<div>key press</div>');
});

Fiddle: press a key, then start dragging the span element, and while dragging try pressing a key again (you might have to click the "results" pane first so it has focus)

https://jsfiddle.net/Davy78/xkddhzts/2/

This is silly, I am not able to provide this simple feature request to the users. Does anyone know of any workarounds?

Answer 1

The html5 drag and drop api only allows "modifier keys" to be pressed during a drag. This means that it is possible to notice keys like shift, control, alt, command (if on a mac).

Information, about if these keys are pressed or not, can be found inside the drag event. Other event listeners will not notice them during a drag.

E.g

function onDrag(event) {
    if (event.shiftKey) {
        $('#log').append('<div>Shift is pressed!</div>');
    }
}

But the event will only hold the information if you have set the correct "effectAllowed" on the dataTransfer object.

The original intent of these keys being available, is to modify the effect of the drop. Like the shift key indicating that you want to do a copy and not a move, with the drag. It is possible to set the "effectAllowed" on the dataTransfer object and the modifier keys only work with a specific allowed effect. (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects)

If you want all the modifier keys to be available you can set:

event.dataTransfer.effectAllowed = 'all';

To see a demo of the result please have a look here: https://jsfiddle.net/xkddhzts/6/

Try to drag the text and then at the same time press shift.