HTML5_DragDrop_NoKeyEvents

While dragging, no key events are generated ...

HTML

<body class="body">
    <div draggable="true" class="draggable">Drag me.</dib>
    <div id="log"></div>
</body>

JavaScript

$(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>');
});

var body = document.getElementsByClassName('body')[0];
var dragElement = document.getElementsByClassName('draggable')[0];

dragElement.addEventListener('dragstart', dragStart, false);
dragElement.addEventListener('drag', onDrag, false);

body.addEventListener('dragover', dragOver, false);
body.addEventListener('dragenter', dragEnter, false);

function dragStart(event) {
    event.dataTransfer.effectAllowed = 'all';
}

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

function dragOver(event) {
 event.preventDefault();   
}

function dragEnter(event) {
 event.preventDefault();   
}