<html>
<head>
<script>
    function logDrag(e) {
        var l = document.getElementById('log');
        l.innerHTML += 'shiftKey=' + e.shiftKey + ' ctrlKey=' + e.ctrlKey + ' altKey=' + e.altKey + ' metaKey=' + e.metaKey + '\n';
        e.preventDefault();
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('dragenter', logDrag, false);
        document.addEventListener('dragover', logDrag, false);
        document.addEventListener('dragleave', logDrag, false);
        document.addEventListener('drop', logDrag, false);
    });
</script>
</head>

<body>
    <p>Drag the "Drag me" with any modifier keys pressed (Shift/Ctrl/Alt) and see if the log messages have the correct modifier state</p>
    <div draggable='true' id='dragme'>
        Drag me
    </div>
    <pre id='log'></pre>
</body>
</html>